我有一个小部件，我想在多条路线中使用。我需要这个小部件根据它是哪条路线使用不同的自定义 class 实例

Question

小部件总是使用它自己的 dart 文件中的实例。我想在每条路线上创建不同的实例，并让小部件使用该实例。

我的习惯class（我现在只需要名字）：

class Chat {
String name, lastMesssage, image, time, page;
bool isActive;

Chat ({
  this.name,
  this.lastMesssage,
  this.image,
  this.time,
  this.isActive,
  this.page,
});
}

我的插件：

Chat chat;

class Bar extends StatefulWidget {
  @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: [
            //that's where I need different Chat instances
            Text(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, ),
      ],
    );
  }
}

我需要小部件的地方（例如，我希望 Bar() 在其中使用 michael scott）：

Chat chat = Chat(name: michael scott);

return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Column(
        children: [
          SizedBox(height: 30,),
          Bar(), 
          //It goes on

Answer 1

导航到 Bar 路线时，您必须传递确切的 Chat 实例。在那种情况下，你必须选择。

1.在 Bar 构造函数中使用 Chat 参数

class Bar extends StatefulWidget {
  final Chat chat;

  const Bar({Key? key, required this.chat}) : super(key: key);
  @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: [
            //that's where I need different Chat instances
            Text(
              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,
        ),
      ],
    );
  }
}

然后您可以使用特定的 Chat 实例创建 Bar 的实例，如下所示：

Bar(
  chat: Chat(
    //Fill the rest of the properties
  ),
),

如果您想使用此 Bar 实例导航到另一条路线，您将使用以下内容：

Navigator.of(context).push(
  MaterialPageRoute(builder: (context) => Bar(chat: Chat())),
),

2。使用命名路由

传递聊天参数

在这种情况下，我们不接受承包商的论据，而是使用 Navigator class 中的以下方法：

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

为了使该方法正常工作，我们还应该将 onGenerateRoute 回调添加到应用程序根目录中的 MaterialApp。像这样：

 MaterialPageRoute? onGenerateRoute(RouteSettings settings) {
  if (settings.name == '/bar') {
    return MaterialPageRoute(builder: (context) => Bar(), settings: settings);
  }
}

MaterialApp(
  onGenerateRoute: onGenerateRoute,
)

导航到 Bar 后，我们必须检索传递给路由的参数。通常这是在小部件 build 方法的第一行完成的。在这种情况下，条形小部件将如下所示：

class Bar extends StatefulWidget {
  const Bar({Key? key,}) : super(key: key);
  @override
  _BarState createState() => _BarState();
}

class _BarState extends State<Bar> {
  @override
  Widget build(BuildContext context) {
    final chat = ModalRoute.of(context)?.settings.arguments as Chat;
    return Row(
      children: [
        SizedBox(
          width: 15,
        ),
        Image(
          image: AssetImage("assets/asset.png"),
          width: 55,
          height: 55,
        ),
        SizedBox(
          width: 10,
        ),
        Column(
          children: [
            //that's where I need different Chat instances
            Text(
              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,
        ),
      ],
    );
  }
}

我有一个小部件，我想在多条路线中使用。我需要这个小部件根据它是哪条路线使用不同的自定义 class 实例

I have a widget that I want to use in multiple routes. I need this widget to use different custom class instances depending on which route it is

flutter

class

widget

instance