Flutter StatefulWidget - 状态类继承？

Posted 2021-05-03

这个问题的关键在于如何处理状态变化，最好由原始祖先自动处理。在我看来，使用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中。