Flutter

Flutter 的 Widget 状态管理

2021-11-15  本文已影响0人  晨曦的简书

Widget 状态管理

iOS 中我们可以设置一个按钮不同状态下的 UI 展示效果。但是 flutter 的渲染原理是增量渲染,对于展示的 widegt 小部件的刷新都是创建新的替换原来旧的。所以对于 UI 部件来说是没有状态的,因为小部件都是新创建的,小部件的属性都是 final 属性。说明都是不能改变的,创建出来都是新的。所以对于 UI 部件来说就没有必要拥有状态。

但是对于一些复杂的页面,需要改变的地方非常多,或者数据来说如果没有状态就会非常不方便。例如我们需要保留一份数据,并且实时刷新界面的展示,这时候就需要状态来进行管理会比较方便。所以 flutter 就提供了一种有状态的 widget 类型。就是渲染逻辑跟数据逻辑是分开管理的,保留的是数据逻辑,但是 UI 都是实时新创建的。这两种逻辑在底层是分开管理的,但是渲染跟数据有时有关联的,所以 flutter 对这两种逻辑进行了封装,提供给我们的就是有状态的 widget。下面我们通过一个案例来看一下。

class StateManagerDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SMDState();
  }
}

class _SMDState extends State<StateManagerDemo> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            title: const Text('StateDemo'),
          ),
          body: Center(
            child: Chip(label: Text('$count')),
          ),
          floatingActionButton: FloatingActionButton(onPressed: (){
            setState(() {
              count += 1;
              print('$count');
            });
          }, child: Icon(Icons.add)),
        )
    );
  }
}

我们创建一个 StateManagerDemo 类,并为StateManagerDemo 类创建了一个专门负责状态管理的私有类 _SMDState,也就是状态管理者。我们可以通过累加按钮对 count 进行累加,并实时刷新 count 的展示。外界并不能访问状态管理者,状态管理者为私有的,不能接收外部传递的数据。对外暴露的所有接口都放到 StateManagerDemo 类里面,每次点击累加按钮的时候就会调用一次 setState 方法,相当于重新调用 build 方法,对页面进行重新渲染。因为是增量渲染,所以每次只会重新创建 Text 部件。

上一篇下一篇

猜你喜欢

热点阅读