Flutter用状态管理起源类InheritedWidget来定义自己的provider
提笔缘由
状态管理伴随着Flutter的发展日益丰富，如果说响应式是Flutter的特色，那么状态管理的就是实现方式，从最初的provide再到官方认可的provider，还有scoped_model，event_bus，get，riverpod，BloC，redux等等太多。作为开发者，对这些状态管理实现方式可以了解一二，当然因为学疏才浅，我只能略懂。Stream和InheritedWidget两种不同方式实现状态管理，项目中常用的Provider核心就是InheritedWidget，所以通过探究该类来侧面理解provider，在实践中很少用到InheritedWidget，但他是个幕后英雄。
关联知识点
- InheritedWidget
- ValueNotifier
- ValueListenBuilder
- Builder
- ChangeNotifier
- ValueListenable
类InheritedWidget
构造函数很简单，需要必传一个Widget，因为只有他的child，才能获取到存放在树梢的数据。
InheritedWidget({Key key,required Widget child})
继承InheritedWidget后必须override的方法，作用是你来决定通知变化的条件，以便节省资源。
updateShouldNotify(
covariant InheritedWidget oldWidget
) → bool
继承的新类需要一个静态方法 of(context)，也是核心的一步，child就是通过of获取在树梢的数据，借助context.dependOnInheritedWidgetOfExactType方法来获取。
最简单示例
用最简单的例子演示InheritedWidget使用步骤，定义类ColorInherited继承InheritedWidget，里面存放颜色color和大小size，ColorInherited用于下面的child获取。ColorInherited可以放在Scaffold上下都可以，注意点是需要类Builder促使生成context，否则会因为context问题而报错，第二个注意点是dependOnInheritedWidgetOfExactType方法是泛型，要传入具体类。示例代码如下：
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: ColorInheritedPage()));
class ColorInheritedPage extends StatelessWidget {
const ColorInheritedPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('InheritedWidget演示')),
body: ColorInherited(
size: const Size(300, 100),
color: Colors.brown,
child: Builder(builder: (context) {
var provider = ColorInherited.of(context);
return Container(
height: provider.size.height,
width: provider.size.width,
color: provider.color,
);
}),
),
);
}
}
class ColorInherited extends InheritedWidget {
final Color color;
final Size size;
const ColorInherited({
super.key,
required super.child,
required this.color,
required this.size,
});
static ColorInherited of(BuildContext context) {
var inherited = context.dependOnInheritedWidgetOfExactType<ColorInherited>();
assert(inherited != null, 'error:No ColorInherited ');
return inherited!;
}
@override
bool updateShouldNotify(covariant ColorInherited oldWidget) {
return oldWidget.size != size || oldWidget.color != color;
}
}
计数器示例
在理解InheritedWidget如何使用后，我们可继续探究。上面例子中是静态数据，页面没有任何变化，现在用他来做个计数器的页面，是一种有变化的状态，需要及时去响应，就可以结合ChangeNotifier类，这个是不是熟悉的味道，在provider中定义数据类时需要继承他，借助ChangeNotifier定义自己的数据，存放一个变量，是需要ValueNotifier类，
//存放需要监听的变量
class CounterNotify extends ChangeNotifier {
final countState = ValueNotifier<int>(0);
void add() => countState.value++;
}
而ValueListenableBuilder负责在页面上响应变化做到局部刷新，ValueNotifier和ValueListenableBuilder配套使用。
有数据源之后，需要借助InheritedWidget来放在树上，其下child随时取用，这个状态管理类CounterInherited里有个变量是CounterNotify类型的，也就是数据源。
//类似于Provider类
class CounterInherited extends InheritedWidget {
const CounterInherited({
super.key,
required super.child,
required this.counterNotify,
});
final CounterNotify counterNotify;
static CounterInherited of(BuildContext context) {
var inherited = context.dependOnInheritedWidgetOfExactType<CounterInherited>();
assert(inherited != null, '在context中未找到CounterInherited类');
return inherited!;
}
@override
bool updateShouldNotify(covariant CounterInherited oldWidget) {
return oldWidget.counterNotify != counterNotify;
}
}
万事具备，只欠显示在页面上，ValueNotifier和ValueListenableBuilder配套使用，一个负责页面端显示，一个负责状态变化及通知。其实更严格地说是ValueListenable和ValueListenableBuilder配套使用，ValueNotifier只是抽象类ValueListenable的继承者，还有熟悉的类Animation也是属于ValueListenable，
//构造函数
ValueListenableBuilder({
Key? key,
required ValueListenable<T> valueListenable, //对应数据源的变量
required ValueWidgetBuilder<T> builder,
Widget? child
})
//抽象类ValueListenable的继承者有: ValueNotifier、Animation、RouteInformationProvider、SelectionHandler。
用InheritedWidget和ValueListenable组装的计数器完成，代码如下：
//空安全,Flutter3.3.2
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: CounterInheritedPage()));
class CounterInheritedPage extends StatelessWidget {
const CounterInheritedPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return CounterInherited(
counterNotify: CounterNotify(),
child: Scaffold(
appBar: AppBar(title: const Text('InheritedWidget计数器')),
//需要Builder促使context实例,否则无context
body: Builder(builder: (context) {
var provider = CounterInherited.of(context).counterNotify;
return Center(
child: GestureDetector(
onTap: provider.add,
//局部刷新
child: ValueListenableBuilder(
valueListenable: provider.countState,
builder: (context, value, child) {
return Text('${provider.countState.value}');
},
),
),
);
}),
),
);
}
}
//类似于Provider类
class CounterInherited extends InheritedWidget {
const CounterInherited({
super.key,
required super.child,
required this.counterNotify,
});
final CounterNotify counterNotify;
static CounterInherited of(BuildContext context) {
var inherited = context.dependOnInheritedWidgetOfExactType<CounterInherited>();
assert(inherited != null, '在context中未找到CounterInherited类');
return inherited!;
}
@override
bool updateShouldNotify(covariant CounterInherited oldWidget) {
return oldWidget.counterNotify != counterNotify;
}
}
//存放需要监听的变量
class CounterNotify extends ChangeNotifier {
final countState = ValueNotifier<int>(0);
void add() => countState.value++;
}