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

前端之家收集整理的这篇文章主要介绍了flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

  1. class Inheritedwidget extends StatefulWidget {
  2. @override
  3. _InheritedWidgetState createState() => _InheritedWidgetState();
  4. }
  5. class _InheritedWidgetState extends State<Inheritedwidget> {
  6. int count=0;
  7. @override
  8. void initState() {
  9. // TODO: implement initState
  10. super.initState();
  11. }
  12. @override
  13. Widget build(BuildContext context) {
  14. print(count);
  15. return Scaffold(
  16. appBar: AppBar(title: Text("inherited widget"),),body: Container(
  17. child: Center(
  18. child: Column(
  19. children: <Widget>[
  20. Text("class0"),class1(count),],floatingActionButton: FloatingActionButton(onPressed: (){
  21. return addCount();
  22. },child: Text("add"),);
  23. }
  24. void addCount() {
  25. setState(() {
  26. count=1+count;
  27. });
  28. }
  29. }

WidgetB:

  1. class class1 extends StatelessWidget {
  2. int count;
  3. class1(this.count);
  4. @override
  5. Widget build(BuildContext context) {
  6. return Container(
  7. child: Column(
  8. children: <Widget>[
  9. Text("class1"),class2(count),);
  10. }
  11. }

widgetC:

  1. class class2 extends StatelessWidget {
  2. int count;
  3. class2(this.count);
  4.  
  5. @override
  6. Widget build(BuildContext context) {
  7. return Container(
  8. child: Center(
  9. child: Text("$count"),);
  10. }
  11. }

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

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

中间类:

  1. //countProvider类 提供count属性和child属性 用于与原widget相关联,
  2. class CountProvider extends InheritedWidget{
  3. final int count;
  4. final Widget child;
  5. //构造方法
  6. CountProvider({this.count,this.child}):super(child:child);
  7. //提供方法获取到countprovider类对象
  8. static CountProvider of(BuildContext context){
  9. return context.inheritFromWidgetOfExactType(CountProvider);
  10. }
  11. @override
  12. bool updateShouldNotify(InheritedWidget oldWidget) {
  13. // TODO: implement updateShouldNotify
  14. return false;
  15. }
  16. }

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

  1. class Inheritedwidget extends StatefulWidget {
  2. @override
  3. _InheritedWidgetState createState() => _InheritedWidgetState();
  4. }
  5. class _InheritedWidgetState extends State<Inheritedwidget> {
  6. int count=0;
  7. @override
  8. Widget build(BuildContext context) {
  9. print(count);
  10. return CountProvider(
  11. count:count,child: Scaffold(
  12. backgroundColor: Colors.blue,appBar: AppBar(title: Text("inherited widget"),body: Container(
  13. child: Center(
  14. child: Column(
  15. children: <Widget>[
  16. Text("class0"),class1(),floatingActionButton: FloatingActionButton(onPressed: (){
  17. return addCount();
  18. },);
  19. }
  20. void addCount() {
  21. setState(() {
  22. count=1+count;
  23. });
  24. }
  25. }

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

  1. class class2 extends StatelessWidget {
  2. @override
  3. Widget build(BuildContext context) {
  4. int count = CountProvider.of(context).count;
  5. return Container(
  6. child: Center(
  7. child: Text("$count"),);
  8. }
  9. }

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

总结

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

猜你在找的Android相关文章