Flutter 无状态小部件中启动时调用函数

489 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

  • 本文主要介绍如何在 Flutter 无状态小部件中启动时调用函数

有没有想过如何从无状态小部件在 Flutter 启动时调用异步函数?

移动开发中最常见的场景之一是在显示新视图时调用异步函数。在 Flutter 中,这可以使用有状态的小部件并在initState函数中调用您的代码来完成。

class Example extends StatefulWidget {
  Example({Key key}) : super(key: key);
​
  _ExampleState createState() => _ExampleState();
}
​
class _ExampleState extends State<Example> {
​
  @override
  void initState() {
    _getThingsOnStartup().then((value){
      print('Async done');
    });
    super.initState();
  }
​
  @override
  Widget build(BuildContext context) {
    return Container();
  }
​
  Future _getThingsOnStartup() async {
    await Future.delayed(Duration(seconds: 2));
  }
} 

如果您想从无状态小部件调用它怎么办?嗯,这也是可能的。使用有状态小部件作为根小部件,您也可以提供回调函数来执行启动逻辑。请参阅下面的示例。

创建一个 StatefulWrapper,它接受一个要调用的函数和一个要显示的子项。

/// Wrapper for stateful functionality to provide onInit calls in stateles widget
class StatefulWrapper extends StatefulWidget {
  final Function onInit;
  final Widget child;
​
  const StatefulWrapper({@required this.onInit, @required this.child});
​
  @override
  _StatefulWrapperState createState() => _StatefulWrapperState();
}
​
class _StatefulWrapperState extends State<StatefulWrapper> {
​
@override
  void initState() {
    if(widget.onInit != null) {
      widget.onInit();
    }
    super.initState();
  }
​
  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

将 stateless 小部件的 UI 包装在 StatefulWrapper 中,并传递您想要运行的 onInit 逻辑

class StartupCaller extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StatefulWrapper(
      onInit: () {
        _getThingsOnStartup().then((value) {
          print('Async done');
        });
      },
      child: Container(),
    );
  }
​
  Future _getThingsOnStartup() async {
    await Future.delayed(Duration(seconds: 2));
  }
}

就是这样。该函数只会在有状态小部件初始化时调用一次。