Flutter:如何使用变量将参数传递给 Widget? [英] Flutter: how to pass arguments to a Widget using a variable?

问题描述

以下是一些伪代码，显示了我要实现的目标:

Text txt(text, [subtitle = false]) {最终参数 = 副标题?{'textAlign': TextAlign.center,'风格':TextStyle(颜色:Colors.purple)}:{'textAlign': TextAlign.left,'风格':TextStyle(颜色:Colors.black54)};返回文本(文本，...参数，);}

是否可以将可变参数传递给 Flutter 小部件?请记住，Text 小部件只是一个示例，并不是我问题的重点，它可以是任何其他 Flutter 小部件，例如 Container 或 SizedBox.

解决方案

如何使用变量将参数传递给小部件:

<块引用>

tldr;我们必须稍微改变一下我们的想法.数据可以当您使用 final 导航到它时传递给被调用的小部件目标小部件中具有默认值的参数.使用可选功能，您可以从孩子"(目的地)取回数据小部件.

在目标有状态小部件中，您创建一个最终变量；

 final int boxIndex;

在目标构造函数中给你的最终变量一个常量默认值

DestinationClassConstructor({Key?key, this.boxIndex = -1}): super(key: key);

您可以向有状态小部件类添加以某种重要方式使用该值的方法:

例如

 bool isEditing() {返回 this.boxIndex != -1;}

在调用目标小部件的源小部件中，您可以传入一个非默认值.

DestinationClassConstructor(boxIndex: 123),

在目标小部件状态内容类中，您可以直接使用该值或调用上面的方法:

例如

widget.isEditing()小部件.boxIndex，

<块引用>

当您决定可以将函数作为参数传递:

例如

在目标有状态小部件中，使用其构造函数参数创建可为空的函数调用:

final Function()?目的地小工具点击;DestinationClassConstructor({Key?key, this.destinationWidgetTapped}): super(key: key);

<块引用>

注意:在这种情况下，函数变量被分配了一个默认值为空.

在目标内容状态小部件的某个地方调用该函数:

if (widget.destinationTapped != null) widget.destinationWidgetTapped!();

然后在您的源小部件中按如下方式进行调用:

DestinationClassConstructor(destinationWidgetTapped: () {print('来自源小部件的代码在调用子小部件事件后执行');Navigator.of(context).pop();//弹出子小部件},

当您考虑到还可以在函数调用的同时传回一个值时，这很好且非常有用.

final 函数(字符串)?目的地小工具点击;DestinationClassConstructor({Key?key, this.destinationWidgetTapped}): super(key: key);

在目标内容状态小部件的某个地方调用该函数:

if (widget.destinationTapped != null) widget.destinationWidgetTapped!('Hello from the Destination Content State Widget');

然后你可以像这样接收数据:

DestinationClassConstructor(destinationWidgetTapped: (value) {print('数据是从目标小部件传递的，字符串值为:$value');Navigator.of(context).pop();},

<块引用>

诺塔本:

Function(String) 也可以写成 ValueChanged

我们可以进一步推断任何对象都可能被传递:

Function(Object?) 写成 ValueChanged

这个论点最好写成:

final ValueChanged?onValueChanged;DestinationClassConstructor({Key?key, this.onValueChanged}): super(key: key);

允许发送任何数据对象，数组，json，map，string、int、bool 等，同时保持对完成的访问处理程序，以便可以在两个方向上访问变量数据.

Here's some pseudo code showing what I'm trying to achieve:

Text txt(text, [subtitle = false]) {
  final params = subtitle
      ? {
          'textAlign': TextAlign.center,
          'style': TextStyle(color: Colors.purple)
        }
      : {
          'textAlign': TextAlign.left,
          'style': TextStyle(color: Colors.black54)
        };

  return Text(
    text,
    ...params,
  );
}

Is it possible to pass variable arguments to a Flutter widget? Please keep in mind that the Text widget is just an example and not the focus of my question, it could be any other Flutter widget, like Container, or SizedBox, for example.

解决方案

How to pass arguments to a widget using a variable:

tldr; We have to turn our thinking on its head a bit. Data can be passed to the called widget when you navigate to it by using final arguments with default values in the destination widget. Using an optional function you can get data back from the 'child' (destination) widget.

In the destination stateful widget you create a final variable;

 final int boxIndex;

In the destination constructor give your final variable a constant default value

DestinationClassConstructor({Key? key, this.boxIndex = -1}): super(key: key);

You can add methods to the stateful widget class that use the value in some significant way:

e.g.

  bool isEditing() {
    return this.boxIndex != -1;
  }

In the source widget that calls the destination widget, you can pass in a value other than the default.

DestinationClassConstructor(boxIndex: 123),

In the destination widgets state content class you could use the value directly or call the method above:

e.g.

widget.isEditing()
widget.boxIndex,

The real power of this method happens when you decide that you can pass Functions as parameters:

e.g.

In your destination stateful widget create the nullable function call with its constructor argument:

final Function()? destinationWidgetTapped;

DestinationClassConstructor({Key? key, this.destinationWidgetTapped}): super(key: key);

Note: In this case the function variable is assigned a default value of null.

Somewhere in your destination content state widget call the function:

if (widget.destinationTapped != null) widget.destinationWidgetTapped!();

Then in your source widget make the call as follows:

DestinationClassConstructor(destinationWidgetTapped: () {
                        print('this code from the source widget executes after the child widget event is invoked');

                        Navigator.of(context).pop(); //pop the child widget
                      },

Which is fine and very useful when you consider that you can also pass back a value along with the function call.

final Function(String)? destinationWidgetTapped;

DestinationClassConstructor({Key? key, this.destinationWidgetTapped}): super(key: key);

Somewhere in your destination content state widget call the function:

if (widget.destinationTapped != null) widget.destinationWidgetTapped!('Hello from the Destination Content State Widget');

Then you can receive data like this:

DestinationClassConstructor(destinationWidgetTapped: (value) { 
    print('Data is passed from the destination widget with a string value of : $value');
    Navigator.of(context).pop();
},

Nota Bene:

Function(String) can also be written as ValueChanged<String>

We can further extrapolate that any object may be passed:

Function(Object?) written as ValueChanged<Object?>

And the argument might be better written as:

final ValueChanged<Object?>? onValueChanged;
DestinationClassConstructor({Key? key, this.onValueChanged}): super(key: key);

Which would allow one to send any data object, array, json, map, string, int, bool, etc. while maintaining access to a completion handler so that one could access the variable data in both directions.

这篇关于Flutter:如何使用变量将参数传递给 Widget?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！