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

Question

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


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 文档中这样做的。然而，我还是没明白。

Answer 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);

Answer 2

不用写args.imagePath和args.characterName

你可以直接称呼为imagePath和characterName

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

this是为了在flutter中使用路由名导航

Answer 3

因为您是在 constructor 而不是 Navigator

中传递参数

你可以直接使用imagePath和characterName如

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

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

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

它用于获取在Navigation期间传递的参数，如

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

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

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

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

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

How to pass a string argument in Flutter?

flutter

flutter-desktop