Links

03.状态管理

前言

Flutter 的渲染模式是 增量渲染 ,当一部分有变化的时候就将原先的替换掉。所以页面元素没有必要拥有状态。但是这样对于时机开发并不友好,尤其对于数据驱动的复杂的页面。
这样就出现了 有状态的Widget :数据逻辑与渲染逻辑拆分开来,数据保留,页面增量渲染。

StatefulWidget

在我们需要可变数据驱动的Widget时,需要两个重要的部分:由数据驱动渲染。
1
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。