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

2019-12-12 00:08:08

字体：大中小

来源：转载

供稿：网友

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

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嵌套使用需要传递值的时候),希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：flutter 输入框组件TextField的实现代码

下一篇：flutter 屏幕尺寸适配和字体大小适配的实现