通常情况下,子widget无法单独感知父widget的变化,当父state变化时,通过其build重建所有子widget;
InheritedWidget可以避免这种全局创建,实现局部的子widget更新:
子widget通过BuildContext.inheritFromWidgetOfExactType从buildContext中获取并监听指定类型的父InheritedWidget,并跟随其重建而rebuild
- 父widget使用InheritedWidget包装
class FatherWidget extends InheritedWidget {
final int number;
const FatherWidget({this.number,
Key key,
@required Widget child,
}) : assert(child != null),
super(key: key, child: child);
static FatherWidget of(BuildContext context) {
//沿element树找到最近的FatherWidget
return context.dependOnInheritedWidgetOfExactType<FatherWidget>();
}
@override
bool updateShouldNotify(FatherWidget old) {
//如果为true时会刷新调用子类ChildOnedidChangeDependencies方法
return old.number != number;
}
}
- 子widget
class ChildOne extends StatefulWidget {
@override
_ChildOneState createState() => _ChildOneState();
}
class _ChildOneState extends State<ChildOne> {
@override
void didChangeDependencies() {
// TODO: implement didChangeDependencies
super.didChangeDependencies();
print("ChildOnedidChangeDependencies");
}
@override
Widget build(BuildContext context) {
int number = FatherWidget
.of(context)
.number;
return Container(
child: Text("$number"),
);
}
}
class ChildTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
int number = FatherWidget.of(context).number;
return Container(
child: Text("$number"),
);
}
}
- 调用
class TestHome extends StatefulWidget {
@override
_TestHomeState createState() => _TestHomeState();
}
class _TestHomeState extends State<TestHome> {
int _number = 100;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("测试State"),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: (){
setState(() {
_number++;
});
},
),
body: Center(
child: FatherWidget(
number: _number,
child: Column(
children: [
ChildOne(),
ChildTwo()
],
),
),
),
);
}
}
网友评论