时间戳

首页 > 解决方案 > Flutter：如何使用变量将参数传递给 Widget？

flutter - Flutter：如何使用变量将参数传递给 Widget？

问题描述

这是一些伪代码，显示了我要实现的目标：

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,
  );
}

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

标签： fluttervariablesdartarguments

解决方案

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

tldr; 我们必须稍微改变一下思路。当您通过在目标小部件中使用具有默认值的最终参数导航到被调用小部件时，可以将数据传递给它。使用可选功能，您可以从“子”（目标）小部件获取数据。

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

 final int boxIndex;

在目标构造函数中，为您的最终变量提供一个常量默认值

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

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

例如

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

在调用目标小部件的源小部件中，您可以传入默认值以外的值。

DestinationClassConstructor(boxIndex: 123),

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

例如

widget.isEditing()
widget.boxIndex,

当您决定可以将函数作为参数传递时，此方法的真正威力就会出现：

例如

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

final Function()? destinationWidgetTapped;

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

注意：在这种情况下，函数变量被分配了一个默认值 null。

在您的目标内容状态小部件中的某处调用该函数：

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

然后在您的源小部件中进行如下调用：

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
                      },

当您考虑到您还可以将值与函数调用一起传回时，这很好并且非常有用。

final Function(String)? destinationWidgetTapped;

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('Data is passed from the destination widget with a string value of : $value');
    Navigator.of(context).pop();
},

注意事项：

Function(String)也可以写成ValueChanged<String>

我们可以进一步推断可以传递任何对象：

Function(Object?)写成ValueChanged<Object?>

这个论点可能更好地写成：

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

这将允许发送任何数据对象、数组、json、map、string、int、bool 等，同时保持对完成处理程序的访问，以便可以双向访问变量数据。

推荐阅读