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

简介: 本文主要介绍如何在 Flutter 无状态小部件中启动时调用函数有没有想过如何从无状态小部件在 Flutter 启动时调用异步函数?移动开发中最常见的场景之一是在显示新视图时调用异步函数。在 Flutter 中,这可以使用有状态的小部件并在initState函数中调用您的代码来完成。

本文主要介绍如何在 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));
  }
}
复制代码

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



相关文章
|
4天前
|
存储 容器
Flutter 有状态Widget 和 无状态Widget
Flutter 有状态Widget 和 无状态Widget
|
6月前
|
Dart 开发者
Flutter 中的 RenderObjectToWidgetAdapter 小部件:全面指南
Flutter 中的 RenderObjectToWidgetAdapter 小部件:全面指南
35 2
|
6月前
|
开发者
Flutter 中的 ChipTheme 小部件:全面指南
Flutter 中的 ChipTheme 小部件:全面指南
60 3
|
7月前
|
编解码 开发工具 开发者
Flutter 中的 WidgetInspector 小部件:全面指南
但它主要用于调试目的,在生产环境中应该谨慎使用。
64 2
|
Dart JavaScript 安全
Flutter State Management状态管理全面分析(二)
Flutter State Management状态管理全面分析
252 0
Flutter State Management状态管理全面分析(二)
|
算法 前端开发 JavaScript
Flutter State Management状态管理全面分析(一)
Flutter State Management状态管理全面分析
561 0
Flutter State Management状态管理全面分析(一)
|
Dart IDE 开发工具
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】
Flutter框架对热重载在项目里的深度运用,状态热重新加载以及静态字段被延迟初始化【Flutter】
【Flutter】当项目中使用交互并且使用小工具管理其状态widget的state的详解
【Flutter】当项目中使用交互并且使用小工具管理其状态widget的state的详解
|
Java Android开发
Flutter(八)——状态管理(二)
Flutter(八)——状态管理(二)
279 0
Flutter(八)——状态管理(二)
|
JavaScript 前端开发 Java
Flutter(八)——状态管理(一)
Flutter(八)——状态管理(一)
518 0
Flutter(八)——状态管理(一)