Flutter多路由复用Bar组件时如何传入不同自定义Chat类实例

你只需要给Bar组件增加接收Chat实例的构造参数即可，具体修改步骤如下：

1. 修改Bar组件代码 #

首先删除Bar组件所在文件中全局定义的Chat chat;变量，给Bar组件增加构造参数接收外部传入的Chat实例，使用时通过widget.chat获取实例即可：

class Bar extends StatefulWidget {
  // 增加接收Chat实例的属性
  final Chat chat;
  // 构造方法，必传chat参数
  const Bar({super.key, required this.chat});

  @override
  _BarState createState() => _BarState();
}

class _BarState extends State<Bar> {
  @override
  Widget build(BuildContext context) {
    return  Row(
      children: [
        SizedBox(width: 15,),
        Image(image: AssetImage("assets/asset.png"), width: 55, height: 55,),
        SizedBox(width: 10,),
        Column(
          children: [
            // 通过widget.chat读取传入的实例属性
            Text(widget.chat.name, style: TextStyle(
              color: Colors.black,
              fontSize: 25,
            ),),
            Text("Online", style: TextStyle(
              color: Colors.grey[600],
              fontSize: 15,
            ),),
          ],
        ),
        SizedBox(height: 0,width: 85,),
        Icon(Icons.call_rounded, color: Colors.blueGrey, size: 45, ),
        SizedBox(height:0, width: 14),
        Icon(Icons.videocam, color: Colors.blueGrey, size: 45, ),
      ],
    );
  }
}

如果你使用的Flutter版本没有空安全要求，删除构造方法中的super.key和required修饰符即可。

2. 修改路由页面中Bar组件的调用 #

在路由页面创建Chat实例后，通过参数传入Bar组件即可：

Chat chat = Chat(name: "michael scott"); // 注意字符串内容需要加引号包裹

return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Column(
        children: [
          SizedBox(height: 30,),
          Bar(chat: chat), // 传入当前页面自定义的chat实例
          //后续逻辑省略

修改后不同路由页面就可以传入各自的Chat实例，实现Bar组件的多场景复用。

内容的提问来源于stack exchange，提问作者Bilal Gülmez