flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候)

时间:2021-05-20

如果我们有这样一个应用场景:

WidgetA执行点击之后将数据通过widgetB传递到其下的widgetC。

通常可以通过设置构造函数,传递对应参数到制定的widget树中,如下面代码所描述:

表示需要将widgetA中的点击改变内容传递到widgetB中的widgetC中展示;

需要通过设置widgetB的构造函数,接收对应参数,再传递给widgetC展示;

class Inheritedwidget extends StatefulWidget { @override _InheritedWidgetState createState() => _InheritedWidgetState();}class _InheritedWidgetState extends State<Inheritedwidget> { int count=0; @override void initState() { // TODO: implement initState super.initState(); } @override Widget build(BuildContext context) { print(count); return Scaffold( appBar: AppBar(title: Text("inherited widget"),),body: Container( child: Center( child: Column( children: <Widget>[ Text("class0"), class1(count), ], ), ), ), floatingActionButton: FloatingActionButton(onPressed: (){ return addCount(); },child: Text("add"),), ); } void addCount() { setState(() { count=1+count; }); }}

WidgetB:

class class1 extends StatelessWidget { int count; class1(this.count); @override Widget build(BuildContext context) { return Container( child: Column( children: <Widget>[ Text("class1"), class2(count), ], ), ); }}

widgetC:

class class2 extends StatelessWidget { int count; class2(this.count); @override Widget build(BuildContext context) { return Container( child: Center( child: Text("$count"), ), ); }}

以上方法当然可以实现需要的效果,但是当有多层的widget嵌套关系的时候代码阅读性降低,可以通过以下方法传递值到指定的widget中;

通过类似于Android中的contentProvider提供一个中间类,将需要传递的数据通过中间类传递到制定的widget中。

中间类:

//countProvider类 提供count属性和child属性 用于与原widget相关联,class CountProvider extends InheritedWidget{ final int count; final Widget child; //构造方法 CountProvider({this.count, this.child}):super(child:child); //提供方法获取到countprovider类对象static CountProvider of(BuildContext context){ return context.inheritFromWidgetOfExactType(CountProvider);} @override bool updateShouldNotify(InheritedWidget oldWidget) { // TODO: implement updateShouldNotify return false; }}

通过counterprovider包裹需要展示的widget并传入需要改变的值;

class Inheritedwidget extends StatefulWidget { @override _InheritedWidgetState createState() => _InheritedWidgetState();}class _InheritedWidgetState extends State<Inheritedwidget> { int count=0; @override Widget build(BuildContext context) { print(count); return CountProvider( count:count, child: Scaffold( backgroundColor: Colors.blue, appBar: AppBar(title: Text("inherited widget"),),body: Container( child: Center( child: Column( children: <Widget>[ Text("class0"), class1(), ], ), ), ), floatingActionButton: FloatingActionButton(onPressed: (){ return addCount(); },child: Text("add"),), ), ); } void addCount() { setState(() { count=1+count; }); }}

使用中间类提供的数据执行更新对应widget。

class class2 extends StatelessWidget { @override Widget build(BuildContext context) { int count = CountProvider.of(context).count; return Container( child: Center( child: Text("$count"), ), ); }}

通过以上方法即可在不同widget中传递需要改变的值。

总结

以上所述是小编给大家介绍的flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章