StatefulWidget
Flutter 中的组件，按状态划分：
StatelessWidget（无状态组件）
StatefulWidget（状态组件）
状态组件是包含可变状态的组件，状态的特点：
（1）当组件构建完成后，可同步读取
（2）可以在组件的生命周期中改变
按状态作用域划分
组件内私有状态（StatefulWidget）
跨组件状态共享（InheritedWidget, Provider）
全局状态（Redux, fish-redux, Mobx......）
状态组件的组成
StatefulWidget（组件本身不可变 @immutable）
State（将变化的状态放到 State 中维护）
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('StatefulWidget'),
),
body: const MyState(),
);
}
}
class MyState extends StatefulWidget {
const MyState({Key? key}) : super(key: key);
@override
State<MyState> createState() => _MyStateState();
}
class _MyStateState extends State<MyState> {
int _num = 0;
// 执行加的方法
void _increment() {
setState(() {
_num++;
});
}
// 减的方法
void _decrement() {
setState(() {
if (_num == 0) return;
_num--;
});
}
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: [
// 减
ElevatedButton(
onPressed: _decrement,
child: const Icon(Icons.minimize),
),
// 数字
Padding(
padding: const EdgeInsets.all(20),
child: Text('$_num'),
),
// 加
ElevatedButton(
onPressed: _increment,
child: const Icon(Icons.add),
)
],
),
);
}
}
生命周期
- initState()组件对象插入到元素树中时，通常根据后台接口的返回数据对状态进行初始化
- didChangeDependencies()当前状态对象的依赖改变时
- build()组件渲染时
- setState()组件对象的内部状态变更时
- didUpdateWidget()组件配置更新时
- deactivate()组件对象在元素树中暂时移除时
- dispose()组件对象在元素树中永远移除时
// ignore_for_file: avoid_print
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('LifeCycle'),
),
body: const MyState(),
);
}
}
class MyState extends StatefulWidget {
const MyState({Key? key}) : super(key: key);
@override
State<MyState> createState() => _MyStateState();
}
class _MyStateState extends State<MyState> {
int _num = 0;
@override
void initState() {
// TODO: implement initState
super.initState();
print('initState, 执行initState方法，_num: $_num');
// 通常根据后台接口返回的数据对状态进行初始化
_num = 1;
}
@override
void didChangeDependencies() {
// TODO: implement didChangeDependencies
super.didChangeDependencies();
print('didChangeDependencies, 当前状态对象的依赖改变了, _num: $_num');
}
@override
void didUpdateWidget(covariant MyState oldWidget) {
// TODO: implement didUpdateWidget
super.didUpdateWidget(oldWidget);
print('didUpdateWidget, 组件配置更新了，_num: $_num');
}
@override
void deactivate() {
// TODO: implement deactivate
super.deactivate();
print('deactivate, 组件对象在元素树中暂时移除了，_num: $_num');
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
print('dispose, 组件对象在元素树中永远移除了，_num: $_num');
}
// 执行加的方法
void _increment() {
setState(() {
print('setState, 组件对象的内部状态变更了，_num: $_num');
_num++;
});
}
// 减的方法
void _decrement() {
setState(() {
print('setState, 组件对象的内部状态变更了，_num: $_num');
if (_num == 0) return;
_num--;
});
}
@override
Widget build(BuildContext context) {
print('build, 组件渲染时，_num: $_num');
return Center(
child: Column(
children: [
// 减
ElevatedButton(
onPressed: _decrement,
child: const Icon(Icons.minimize),
),
// 数字
Padding(
padding: const EdgeInsets.all(20),
child: Text('$_num'),
),
// 加
ElevatedButton(
onPressed: _increment,
child: const Icon(Icons.add),
)
],
),
);
}
}
InheritedWidget
What：
提供沿树向下，共享数据的功能
即子组件可以获取父组件（InheritedWidget 的子类）的数据
Why：
依赖构造函数传递数据的方式不能满足业务需求。如图，组件D和组件G共享的数据是通过组件A取数据以后逐级向下透传的，也就是说数据需要逐级传递，比较麻烦，而且不是所有组件都需要相关数据
所以，需要一个新的，更好的跨组件数据传输方案。图中，所有的组件都可以获取顶层父组件 InheritedWidget 的数据，可以直接获取，不需要依赖其它组件传递
How：
BuildContext.dependOnInheritedWidgetOfExactType<MyInheritedWidget>()
构造函数
InheritedWidget({Key? key, required Widget child})
InhertiedWidget抽象类包含一个常量构造器，继承该抽象类的子类可以提供一个常量构造器，在使用这些子类时可以用 const 表达式来调用
child：Widget，表示在组件树中挂载在该子类下的组件
key：Key?，表示要传递的数据
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('InheritedWidget'),
),
body: const CalculatorState(),
);
}
}
// 组件一：挂载在 InheritedWidget 下，它提供了一个可共享的数据 num
class CalculatorState extends StatefulWidget {
const CalculatorState({Key? key}) : super(key: key);
@override
State<CalculatorState> createState() => _CalculatorStateState();
}
class _CalculatorStateState extends State<CalculatorState> {
int _num = 0;
// 执行加的方法
void _increment() {
setState(() {
_num++;
});
}
// 减的方法
void _decrement() {
setState(() {
if (_num == 0) return;
_num--;
});
}
@override
Widget build(BuildContext context) {
// 要调用 of 方法，of 方法中的参数 context 必须是 InheritedWidget 的后代
// 也就是说，组件必须挂在 InheritedWidget 下面
return ShareDataWidget(
// 提供 ShareDataWidget 必须的两个属性 num 和 child
num: _num,
child: Center(
child: Column(
children: [
// 减
ElevatedButton(
onPressed: _decrement,
child: const Icon(Icons.minimize),
),
// 数字
const Padding(
padding: EdgeInsets.all(20),
// 跨组件访问数据
child: MyCounter(),
),
// 加
ElevatedButton(
onPressed: _increment,
child: const Icon(Icons.add),
)
],
),
),
);
}
}
// 组件二：调用 of() 方法，获取 InheritedWidget 共享的数据 num
class MyCounter extends StatefulWidget {
const MyCounter({Key? key}) : super(key: key);
@override
State<MyCounter> createState() => _MyCounterState();
}
class _MyCounterState extends State<MyCounter> {
@override
Widget build(BuildContext context) {
// 使用 InheritedWidget 中的共享数据
if (ShareDataWidget.of(context)?.num == null) {
return const Text('0');
}
return Text(ShareDataWidget.of(context)!.num.toString());
}
}
// 数据共享组件
class ShareDataWidget extends InheritedWidget {
const ShareDataWidget({
Key? key,
required this.num,
required this.child,
}) : super(key: key, child: child);
final int num;
final Widget child;
// 静态方法 of 用于调用 BuildContext.dependOnInheritedWidgetOfExactType
// 这样做的目的是为了让类可以定义自己的回调逻辑，即便该类没有出现在 context 上下文中
static ShareDataWidget? of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<ShareDataWidget>();
}
@override
bool updateShouldNotify(ShareDataWidget oldWidget) {
return true;
}
}
Provider
Provider 是对 InheritedWidget 的封装，使其使用更容易使用且易于复用
文档：https://pub.flutter-io.cn/packages/provider
安装：flutter pub add provider
引用：import 'package:provider/provider.dart';
优点：
（1）简化资源的分配与处置
（2）懒加载
（3）创建新类时减少大量的模板代码
（4）支持 DevTools
实现原理
ChangeNotifier：class，可以封装应用程序的状态，用于向监听器发送通知，如果被定义为 ChangeNotifier，就可以订阅它的状态变化。对于简单的程序，一个 ChangeNotifier 就可以满足需求；对于复杂的应用，由于会有多个模型，所以可能会有多个 ChangeNotifier
ChangeNotifierProvider：widget，用于监听 ChangeNotifier 的实例并将其暴露给子孙节点，并且当 ChangeNotifier.notifyListeners 被调用时，会重新构建。虽然数据是单独存放在 ChangeNotifier 中，但是面对组件时，直接提供数据的是 Provider
如果你想提供更多状态，可以使用 MultiProvider：
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => CartModel()),
Provider(create: (context) => SomeOtherClass()),
],
child: const MyApp(),
),
);
}
区别于 InheritedWidget 把状态存放在根节点上，Provider 会把状态和根节点做分割处理，状态会被提取出来保存在 ChangeNotifier 组件中，使用数据时，需要把数据注册到根节点 ChangeNotifierProdiver 上，后续的逻辑基本相同。
图中的 Producer （生产者）组件修改了数据以后，ChangeNotifierProvier （观察者）就会做两件事情，一是通知 ChangeNotifier（被观察者）更新 data，二是通知所有的 Listener（听众，即消费者）更新UI界面。也就是说，Provider 会把整个应用分成三个部分：
（1）数据部分
（2）监控数据的部分
（3）UI界面
整个过程也可以类比 MVVM 的状态管理模式
使用步骤：
（1）创建数据模型
（2）创建 Provider
（3）在子组件中使用数据模型
示例：
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
// Step 1
// 1、创建数据模型
class LikesModel extends ChangeNotifier {
// 模拟一个私有变量（实际需要把这个类放在一个单独的文件中）
int _counter = 0;
// 模拟一个私有的getter
int get counter => _counter;
void incrementCounter() {
// 累加
_counter++;
// 通知 UI 更新（监听了这个模型的组件重新构建）
notifyListeners();
}
}
// Step 2
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 2、创建 Provider （注册数据模型）
return ChangeNotifierProvider(
create: (BuildContext context) => LikesModel(),
child: Scaffold(
appBar: AppBar(
title: const Text('Provider'),
),
body: const MyHomePage(),
),
);
}
}
// Step 3
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(10),
child: Column(
children: [
// 3、在子组件中使用数据模型
Text(
'点赞了：${context.watch<LikesModel>().counter} 次',
style: const TextStyle(
color: Colors.red,
fontSize: 26,
),
),
TextButton(
onPressed: () => context.read<LikesModel>().incrementCounter(),
child: const Icon(Icons.thumb_up),
),
],
),
);
}
}
读取值
可以使用 BuildContext 上的扩展属性（由 provider 注入）
（1）context.watch<T>()，widget 能够监听到 T 类型的 provider 发生的改变
（2）context.read<T>()，直接返回 T，不会监听改变
（3）context.select<T, R>(R cb(T value))，允许 widget 只监听 T 上的一部分内容的改变
需要注意的是，context.read<T>() 方法不会在值变化时让 widget 重新构建，并且不能在 StatelessWidget.build 和 State.build 内调用。换句话说，它可以在除了这两个方法以外的任意位置调用
Text(
// 此处如果使用 context.read 来读取 counter，将监听不到状态更改，视图不会更新
'点赞了：${context.watch<LikesModel>().counter} 次',
style: const TextStyle(
color: Colors.red,
fontSize: 26,
),
),
这些方法会从传入的 BuildContext 关联的 widget 开始，向上查找 widget 树，并返回查找到的层级最近的 T 类型的 provider（未找到时将抛出错误）。例如，把 Step3 中的 MyHomePage 直接作为 Step2 中的 body 组件，就会报如下错误
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
// Step 1
// 1、创建数据模型
class LikesModel extends ChangeNotifier {
// 模拟一个私有变量（实际需要把这个类放在一个单独的文件中）
int _counter = 0;
// 模拟一个私有的getter
int get counter => _counter;
void incrementCounter() {
// 累加
_counter++;
// 通知 UI 更新（监听了这个模型的组件重新构建）
notifyListeners();
}
}
// Step 2
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 2、创建 Provider （注册数据模型）
return ChangeNotifierProvider(
create: (BuildContext context) => LikesModel(),
child: Scaffold(
appBar: AppBar(
title: const Text('Provider'),
),
// todo: 注意看这里，会产生异常
body: Container(
padding: const EdgeInsets.all(10),
child: Column(
children: [
// 3、在子组件中使用数据模型
Text(
'点赞了：${context.watch<LikesModel>().counter} 次',
style: const TextStyle(
color: Colors.red,
fontSize: 26,
),
),
TextButton(
onPressed: () => context.read<LikesModel>().incrementCounter(),
child: const Icon(Icons.thumb_up),
),
],
),
),
),
);
}
}
ProviderNotFoundException (Error: Could not find the correct Provider<LikesModel> above this Home Widget
大概意思是说，Home组件的 BuildContext 不包含 Provider<LikesModel>，产生这个错误的原因是使用的 BuildContext 是当前正在读取数据的 provider 的祖先元素，当你创建好一个 provider 以后立即读取其数据就会报这个错。
解决方法：
（1）将上下文传递给与构建方法分离。参考示例中的 Step2、Step3 的写法，拆成两个组件
（2）将上下文包装在 Builder 中
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
// Step 1
// 1、创建数据模型
class LikesModel extends ChangeNotifier {
// 模拟一个私有变量（实际需要把这个类放在一个单独的文件中）
int _counter = 0;
// 模拟一个私有的getter
int get counter => _counter;
void incrementCounter() {
// 累加
_counter++;
// 通知 UI 更新（监听了这个模型的组件重新构建）
notifyListeners();
}
}
// Step 2
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 2、创建 Provider （注册数据模型）
return ChangeNotifierProvider(
create: (BuildContext context) => LikesModel(),
child: Scaffold(
appBar: AppBar(
title: const Text('Provider'),
),
// todo: 修改点：将上下文包装在 Builder 中
body: Builder(builder: (BuildContext context) {
return Container(
padding: const EdgeInsets.all(10),
child: Column(
children: [
// 3、在子组件中使用数据模型
Text(
'点赞了：${context.watch<LikesModel>().counter} 次',
style: const TextStyle(
color: Colors.red,
fontSize: 26,
),
),
TextButton(
onPressed: () =>
context.read<LikesModel>().incrementCounter(),
child: const Icon(Icons.thumb_up),
),
],
),
);
}),
),
);
}
}
DataTable
DataTable 是 Flutter 中的表格
columns：声明表头列表
DataColumn：表头单元格
rows：声明数据列表
DataRow：一行数据
DataCell：数据单元格
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('DataTable'),
),
body: ListView(
children: const [UserTable()],
),
);
}
}
class UserTable extends StatefulWidget {
const UserTable({Key? key}) : super(key: key);
@override
State<UserTable> createState() => _UserTableState();
}
class _UserTableState extends State<UserTable> {
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 1),
child: SingleChildScrollView(
child: DataTable(
// 表头
columns: const [
// 表头单元格
DataColumn(label: Text('姓名')),
DataColumn(label: Text('年龄')),
DataColumn(label: Text('性别')),
DataColumn(label: Text('简介')),
],
// 表格主体
rows: const [
// 行
DataRow(cells: [
// 列
DataCell(Text('张三')),
DataCell(Text('18')),
DataCell(Text('男')),
DataCell(Text('一首张三的歌')),
]),
DataRow(cells: [
DataCell(Text('二丫')),
DataCell(Text('22')),
DataCell(Text('女')),
DataCell(Text('没有简介')),
]),
],
),
),
);
}
}
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('DataTable'),
),
body: const UserTable(),
);
}
}
class User {
String name;
int age;
String gender;
String intro;
bool selected;
User(this.name, this.age, this.gender, this.intro, {this.selected = false});
}
class UserTable extends StatefulWidget {
const UserTable({Key? key}) : super(key: key);
@override
State<UserTable> createState() => _UserTableState();
}
class _UserTableState extends State<UserTable> {
List<User> data = [
User('美国队长', 200, '男', '最会甩锅的男人'),
User('钢铁侠', 72, '男', 'i love you more than 4000'),
User('蜘蛛侠', 18, '男', '彼得帕克和玛莉简拍照时被五彩毒蜘蛛咬了', selected: true),
User('黑寡妇', 36, '女', '把你的洗澡水给杜兰特喝一点吧'),
];
bool _sortAscending = true;
List<DataRow> _getUserRows() {
List<DataRow> dataRows = [];
for (int i = 0; i < data.length; i++) {
dataRows.add(
DataRow(
selected: data[i].selected,
onSelectChanged: (selected) {
// ignore: avoid_print
setState(() {
data[i].selected = selected!;
});
},
cells: [
DataCell(Text(data[i].name)),
DataCell(Text('${data[i].age}')),
DataCell(Text(data[i].gender)),
DataCell(Text(data[i].intro)),
],
),
);
}
return dataRows;
}
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 1),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
// 表格
child: DataTable(
// 需要排序的列
sortColumnIndex: 1,
// 排序方式，false：降序，true：升序
sortAscending: _sortAscending,
// 行高
dataRowHeight: 100,
// 每一行的首位两列的表格边缘和父容器间的外边距
horizontalMargin: 10,
// 单元格的水平外边距
columnSpacing: 100,
// 表头
columns: [
const DataColumn(label: Text('姓名')),
DataColumn(
label: const Text('年龄'),
// 该列是否表示数值，如是，则该列内容右对齐
numeric: true,
// 排序：ascending false：降序，true：升序
onSort: (int columnIndex, bool ascending) {
setState(() {
_sortAscending = ascending;
if (ascending) {
// compareTo：负数表示a小于b，正数表示a大于b
data.sort((a, b) => a.age.compareTo(b.age));
} else {
data.sort((a, b) => b.age.compareTo(a.age));
}
});
},
),
const DataColumn(label: Text('性别')),
const DataColumn(label: Text('介绍')),
],
// 表格主体
rows: _getUserRows(),
),
),
);
}
}
