如何在 Flutter 中传递字符串参数？答案

【问题标题】：How to pass a string argument in Flutter?如何在 Flutter 中传递字符串参数？
【发布时间】：2021-03-05 05:11:57
【问题描述】：

我正在尝试创建一个小部件，它是一个容器并接受两个参数，即图像的路径和图像的标题。到目前为止的小部件代码是：


class CharacterBox extends StatelessWidget {
  final String imagePath;
  final String characterName;
  CharacterBox(this.imagePath, this.characterName);
  @override
  Widget build(BuildContext context) {
    final CharacterBox args = ModalRoute.of(context).settings.arguments;
    return Container(
      margin: EdgeInsets.all(20.0),
      height: 200,
      width: 100,
      child: Column(
        children: [
          Expanded(
            child: Image(
              image: AssetImage(args.imagePath),
              alignment: Alignment.center,
              fit: BoxFit.contain,
            ),
          ),
          Container(
            margin: EdgeInsets.all(5.0),
            child: Text(
              args.characterName,
              style: TextStyle(color: Colors.white),
            ),
          )
        ],
      ),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Color.fromARGB(255, 252, 70, 82)),
    );
  }
}

我正在使用以下方法来传递参数：

body: SafeArea(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              CharacterBox("assets/artwork.png", "Character"),
            ],
          ),
        ),

但是我收到错误消息：

The getter 'imagePath' was called on null.
Receiver: null
Tried calling: imagePath

我猜这与 ModalRoute 声明有关，因为我是使用 this 文档进行的。不过，我还是没听懂。

【问题讨论】：

标签： flutter flutter-desktop

【解决方案1】：

您使用的args.imagePath 只能是imagePath 删除 final CharacterBox args = ModalRoute.of(context).settings.arguments;，因为您已经通过构造函数传递参数。

为了提高代码的可读性和性能，我建议如下：

您可以在构造函数上附加const。为了清楚起见，我会改为使用名称参数：

class CharacterBox extends StatelessWidget {
  final String imagePath;
  final String characterName;
  const CharacterBox({
    Key key,
    this.imagePath,
    this.characterName
  }) : super(key: key);

【讨论】：

【解决方案2】：

不用写args.imagePath和args.characterName

你可以直接调用它为imagePath和characterName

     Image(
          image: AssetImage(imagePath),
          alignment: Alignment.center,
          fit: BoxFit.contain,
        ),

this 用于在flutter中使用路由名称导航

【讨论】：

【解决方案3】：

因为您在 constructor 而不是 Navigator 中传递参数

可以直接用imagePath和characterName点赞

     Image(
      image: AssetImage(imagePath),
      alignment: Alignment.center,
      fit: BoxFit.contain,
    ),

你也可以从你的构建函数中删除这行，这是不必要的

final CharacterBox args = ModalRoute.of(context).settings.arguments;

用于获取Navigationlike期间传递的参数

Navigator.of(context).pushNamed('/characterBoxPage',arguments:);

您可以在这里阅读更多关于Navigate with arguments的信息

但在您的情况下，它类似于通常在构造函数中发生的函数调用和参数传递。

如果您需要更多帮助，请在 cmets 中告诉我

【讨论】：