[移动开发]Flutter实战-StatefulWidget

用了两年的flutter，有了一些心得，从今天开始陆续更新一些案例，不虚头巴脑，只求实战有用，以供学习或使用flutter的小伙伴参考，学习尚浅，如有不正确的地方还望各路大神指正，以免误人子弟，在此拜谢~（原创不易，转发请标注来源和作者

注意：无特殊说明，flutter版本为3.0+

        Widget：组件，这个概念可以说在大前端开发中随处可见，非常容易理解，那么在Flutter中Widget有着广泛的概念，可以说几乎所有的对象都是Widget（万物皆Widget也是Flutter 的核心设计思想），Flutter也是通过Widget嵌套来构建ui的，这也是很多人吐糟Flutter的地方，哈哈~

一。Widget

先看官方解释

/// Describes the configuration for an [Element].

        Widget就是Element 的配置信息，这里引出了另一个重要概念Element。那么Element（元素）又是什么呢，官方解释如下：

/// An instantiation of a [Widget] at a particular location in the tree.

        字面意思就是Element是Widget的实例。这里涉及到tree，那就不得不提及Flutter 的”三棵树“：Widgets 树，Element树和Render树（渲染树）。Widgets 树生成Element树，Element树生成Render树，这也是Flutter的渲染流程，在此文中我们先不对Flutter的渲染流程做过多的探究，先明白Widget的概念就好。

二。StatelessWidget和StatefulWidget

三。StatefulWidget使用

1. 根据接口api刷新数据

@override
void initState() {
Api.getRelation(id).then((v) {
    setState(() {
              data = v;
     });
 });    
super.initState();
}

...

static ScaffoldState of(BuildContext context) {
    assert(context != null);
&nbsp;&nbsp;&nbsp;&nbsp;final ScaffoldState? result = context.findAncestorStateOfType<ScaffoldState>();
&nbsp;&nbsp;&nbsp;&nbsp;if (result != null)
&nbsp;&nbsp;&nbsp;&nbsp;return result;

...

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;比如我们要调用Scaffold的openDraw() 打开侧滑抽屉，就可以使用Scaffold.of(context) 获取State&nbsp;

Scaffold.of(context).openDrawer()

我们再实际开发中也可以仿照这样的方式

方式二：通过GlobalKey获取state

&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;这种方式也是我们的常用方式，跟vue中key的使用概念是一样的，不过Globalkey的开销相对较大，尽可能尽量少用

final GlobalKey<State> _globalKey = GlobalKey();

...

_globalKey.currentState.function();

方式三：将state直接暴露出去

&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;这个作者比较经常用，觉得挺方便的。比如需要自定义可变头部组件，然后可以在头部组件调用state的方法

class EditView extends StatefulWidget {

&nbsp; &nbsp; // 可以自定义传入的头部

&nbsp; &nbsp;&nbsp;final dynamic mainItem;

&nbsp; &nbsp; &nbsp;...

&nbsp;&nbsp;&nbsp;&nbsp;@override
&nbsp;&nbsp;&nbsp;&nbsp;Widget build(BuildContext context) {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp; Column(children:[

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;widget.mainItem(this);&nbsp; &nbsp;//将state暴露出去

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;])

....

void xxFunction(){

}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在使用的时候 就可以把state传入到头部组件，在mainItem组件调用EditWidget的内部方法xxFunction()。

EditView(

&nbsp; &nbsp; mainItem:(state)=>widget1(state)

)

widget1（state）{

&nbsp; &nbsp; state.xxFunction()

}

3. 在组件加载完成后调用方法

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WidgetsBinding 这个我们在之前的文章有提到过，

/// Schedule a callback for the end of this frame.

.....

/// * [scheduleFrameCallback], which registers a callback for the start of
/// the next frame.

在下一帧开始之前调用 了该方法，可以像如下使用：

@override
void initState() {
&nbsp;&nbsp;&nbsp;&nbsp;//初始化map
&nbsp;&nbsp;&nbsp;&nbsp;super.initState();

&nbsp;&nbsp;&nbsp;&nbsp;WidgetsBinding.instance.addPostFrameCallback((_) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//添加方法
&nbsp;&nbsp;&nbsp;&nbsp;});

}

具体使用场景可以在自己的项目实践中挖掘。