285 字
1 分钟
状态管理
前言
Flutter 的渲染模式是 增量渲染 ,当一部分有变化的时候就将原先的替换掉。所以页面元素没有必要拥有状态。但是这样对于时机开发并不友好,尤其对于数据驱动的复杂的页面。
这样就出现了 有状态的Widget :数据逻辑与渲染逻辑拆分开来,数据保留,页面增量渲染。
StatefulWidget
在我们需要可变数据驱动的Widget时,需要两个重要的部分:由数据驱动渲染。

import 'package:flutter/material.dart';
// 渲染逻辑class MyStatefulWidget extends StatefulWidget { const MyStatefulWidget({Key? key}) : super(key: key);
@override State<StatefulWidget> createState() { return _MyStateDataSource(); }}
// 数据逻辑class _MyStateDataSource extends State<MyStatefulWidget> { int _clickCount = 0;
@override Widget build(BuildContext context) { return Container( color: Colors.red, child: FloatingActionButton( child: Text("$_clickCount"), onPressed: () { setState(() {// 触发状态改变,重新渲染 _clickCount += 1; }); }, ), ); }}增量渲染
你可能会想,改动一个小数据整个Widget都重新渲染,效率是不是很低啊?
不用担心这里采用的是增量渲染,通过树状的结构实现只修改使用到对应数据的叶子Widget。