Flutter StatefulWidget - 状态类继承?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flutter StatefulWidget - 状态类继承?相关的知识,希望对你有一定的参考价值。

这个问题的关键在于如何处理状态变化,最好由原始祖先自动处理。在我看来,使用StatefulWidget作为祖先(示例1)不可能继续将这些类扩展到第一个子项之外?

在我看来,使用mixins是唯一的方法。但是,这有一个缺点,即您必须手动管理状态更改(示例2)。

我忽略了什么吗?

//示例1 - 不起作用Bar State不从Bar继承

class Foo extends StatefulWidget {
  final String stringFoo;

  Foo({Key key, this.stringFoo}) : super(key: key);

  @override
  FooState createState() => new FooState();
}

class FooState extends State<Foo> {
  bool updating = false;

  Future<void> _update() async {
    // await something(stringFoo)
    setState(() {
      updating = false;
    });
  }

  void update() {
    setState(() {
      updating = true;
    });
    _update();
  }

  // Dummy build, always override
  @override
  Widget build(BuildContext context) {
    return null;
  }

  @override
  void initState() {
    super.initState();
    update();
  }
}

class Bar extends Foo {
  final String stringBar;

  Bar({Key key, String stringFoo, this.stringBar}) : super(key: key, stringFoo: stringFoo);

  @override
  BarState createState() => new BarState();
}

class BarState extends FooState {

  @override
  Widget build(BuildContext context) {
    if(updating) {
      return Text('Im updating: ' + widget.stringFoo);
    } else {
      return Text('All done!' + widget.stringBar);
    }
  }

}

//示例2 - Works但手动处理状态更改

class Foo {
  String stringFoo;
  bool updating = false;

  Widget getFoo() {
    return new Text(stringFoo);
  }

  Future<void> _update() async {
    // await something
    // stringFoo = await result
    updating = false;
    stateChanged();
  }

  void update() {
    updating = true;
    stateChanged();
    _update();
  }

  void stateChanged() {}
}

class Bar extends StatefulWidget {
  final stringBar;

  Bar({Key key, this.stringBar}) : super(key: key);

  @override
  BarState createState() => new BarState();
}

class BarState extends State<Bar> with Foo {
  bool dummy = true;

  Widget getBar() {
    return new Text(widget.stringBar);
  }

  @override
  void stateChanged() {
    setState(() {
      if(dummy) {
        dummy = false;
      } else {
        dummy = true;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    if(updating) {
      return getBar();
    } else {
      return getFoo();
    }
  }

  @override
  void initState() {
    super.initState();
    update();
  }
}
答案

别。你永远不应该扩展一个小部件。这是反模式。相反,正如flutter文档所述:

您可以通过组合窗口小部件来构建更复杂的窗口小部件来创建布局。

一个例子是:

class Foo extends StatefulWidget {
  final Widget child;

  Foo({this.child});

  @override
  _FooState createState() => new _FooState();
}

class _FooState extends State<Foo> {
  @override
  Widget build(BuildContext context) {
    return new Container(

    );
  }
}



class Bar extends StatefulWidget {
  final Widget child;

  Bar({this.child});

  @override
  _BarState createState() => new _BarState();
}

class _BarState extends State<Bar> {
  @override
  Widget build(BuildContext context) {
    return new Foo(
      child: widget.child
    );
  }
}

在这种情况下,Bar没有mixin或继承。它只是将它的孩子包裹在Foo中。

以上是关于Flutter StatefulWidget - 状态类继承?的主要内容,如果未能解决你的问题,请参考以下文章

Flutter:将传递的参数更改为“StatefulWidget”

Flutter 中的 statefulWidget 中的屏幕未更新

了解 Flutter 中 StatefulWidget 的使用

Flutter:如何将变量从 StatelessWidget 传递到 StatefulWidget

Flutter控件——常用控件:StatefulWidget与State

[Flutter Widget] StatefulWidget