使用InheritedWidget实现管理父Widget传值到子Widget
在开发过程中，父Widget拿到网络请求值，或者当前状态改变需要更改子Widget的时候，就涉及到把父Widget获取到的值传递给子Widget。这个时候可以通过子Widget定义的时候定义好要接收的方式；方法固然可行，但是有没有别的更好传值方式？这里我们介绍下使用InheritedWidget来实现在当前页面数据共享。
先来看下通过定义的方式传值
现在定义一个是StatefulWidget类型的ListViewHttpDemo。在ListViewHttpDemoState的build中返回一个自定义的CustomGridView，CustomGridView在创建的时候接收一个可选的List<DataModel>数组，这个数据就就相当于创建CustomGridView接收的来自于父Widget的数据传递。
来看下CustomGridView的定义：
class CustomGridView extends StatelessWidget {
final List<DataModel> listData;//接收数据，用于创建GridView
CustomGridView({Key key, this.listData}):super(key:key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 2.1,
mainAxisSpacing: 16.0,
crossAxisSpacing: 10.0
),
children: _getGridView(),
),
);
}
List<Widget> _getGridView() {
return listData.map<Widget>((dataModel) => Container(
alignment: Alignment.center,
padding: EdgeInsets.only(left:10.0, right: 10.0),
child: Stack(
children: <Widget>[
Image.network(dataModel.imageUrl,fit: BoxFit.cover,),
Positioned(
left: 16.0,
top: 16.0,
child: Container(
child: Text(dataModel.title, style: TextStyle(
color: Colors.red,
fontSize: 20.0,
fontWeight: FontWeight.bold
),),
)),
Positioned(
left: 16.0,
right: 16.0,
top: 40.0,
// height: 60,
child: Text(dataModel.subTitle, style: TextStyle(
color: Colors.white,
fontSize: 14.0,
),))
],
),
)).toList();
}
}
在CustomGridView的父Widget：ListViewHttpDemoState中通过调用‘CustomGridView(listData: _listData,)’，来传递CustomGridView构建自身Widget所需要的数据：
class ListViewHttpDemoState extends State<ListViewHttpDemo> {
List<DataModel> _listData = new List();//生命一个数组
@override
void initState() {
// TODO: implement initState
super.initState();
getData();//获取数据
}
void getData() async {
_listData = await HttpUtils.getListData();//网络请求对象
if(_listData.length > 0) {
if(mounted) {//判断当前WIdget是否还存在，存在的话更新数据
setState(() {});
}
}
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return CustomGridView(listData: _listData,);//创建子Widget并传递数据
}
}
这种数据传递的方式最为普通，也最为常见。
接下来通过InheritedWidget在当前Widget共享数据
InheritedWidget在flutter中是一个比较特殊的存在，使用它可以实在在当前Widget页面中实现数据共享，并且在当前Widget中的子Widget通过xxx.of(context)来获取存储在InheritedWidget中的数据。
先来定义一个数据模型DataModel：
class DataModel{
final String title;
final String subTitle;
final String imageUrl;
DataModel(
this.title,
this.subTitle,
this.imageUrl);
DataModel.changeToModel(Map jsonMap)
:title=jsonMap['title'],
subTitle=jsonMap['subTitle'],
imageUrl=jsonMap['imageUrl'];
}
这个模型用于保存从网络中获取的数据，数据获取后，就存放在我们自定义的InheritedWidgetModel中，InheritedWidgetModel的定义如下：
class InheritedWidgetModel extends InheritedWidget {
List<DataModel> listDate;//保存的数据
final Widget child;//子widget
//构造函数，初始化的时候调用
InheritedWidgetModel({Key key, this.listDate, this.child}):super(key:key,child:child);
//用于获取自定义的InheritedWidgetModel，然后在获取InheritedWidgetModel里面的数据
static InheritedWidgetModel of (BuildContext context) {
final InheritedWidgetModel model = context.inheritFromWidgetOfExactType(InheritedWidgetModel);
return model;
}
@override
bool updateShouldNotify(InheritedWidgetModel oldWidget) {
bool flag = listDate != oldWidget.listDate;
return flag;
}
}
定义好模型和InheritedWidget之后，就要去使用它。
1、在创建当前页面Widget的时候声明InheritedWidgetModel
class InheritDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return InheritedWidgetModel(//下面的子Widget要使用共享数据，就必须在父Widget中声明
listDate: new List(),//初始化数据
child: MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('InheritedWidget'),
actions: <Widget>[
Icon(Icons.add_box)
],
),
body: ListViewHttpDemo(),
// floatingActionButton: ,
),
),
);
}
}
2、在ListViewHttpDemo状态中调用ListViewHttpInheritDemoState
class ListViewHttpDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return ListViewHttpInheritDemoState();
}
}
3、在ListViewHttpInheritDemoState中初始化数据
在这个Widget中的initState方法里面进行网络数据请求：
@override
void initState() {
// TODO: implement initState
super.initState();
getData();//请求数据
}
void getData() async {
List<DataModel> listDate = await HttpUtils.getListData();
if(listDate.length > 0) {
//如果数据不为空，更新InheritedWidgetModel里面的数据
InheritedWidgetModel.of(context).listDate = listDate;
if(mounted) {//判断当前Widget是否还存在
setState(() {});//刷新Widget
}
}
}
4、在自定义CustomInheritGridView中使用数据
数据准备完毕之后，就需要使用：
class CustomInheritGridView extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Center(
child: GridView(创建GridView
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
childAspectRatio: 2.1,
mainAxisSpacing: 16.0,
crossAxisSpacing: 10.0
),
children: CustomGridViewDemo.getGridView(//创建children数组
InheritedWidgetModel.of(context) == null ? null : InheritedWidgetModel.of(context).listDate),
),
);
}
}
接下来运行看下效果，在没有数据的时候，会在中间显示一个‘数据正在加载中。。。。’，等数据加载完成之后就会出现有数据的页面
demo.gif
整个InheritedWidget的使用过程到此结束。
总结一下就是说：
1、要先创建一个继承自InheritedWidget的InheritedWidgetModel
2、在需要使用的父WIdget中使用InheritedWidgetModel来创建
3、数据获取后向InheritedWidgetModel更新数据
4、子Widget使用数据。
本节中使用的代码
网友评论