如何在 main.dart 之外的其他类中声明 multiprovider

Question

我正在尝试在课堂上创建一个多提供者。但它的工作方式与在 Material 应用程序上方的 main.dart 中声明多重提供程序不同。

class Chat extends StatelessWidget {
 const Chat({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider<ChatProvider>( create: (context) => ChatProvider()),
        ChangeNotifierProvider<MessageProvider>( create: (context) => MessageProvider()),
      ],
      child: ChatMainScreen(),
      
      // MaterialApp(
      //     debugShowCheckedModeBanner: false,
      //     home: ChatMainScreen(),
      // )
    );
  }
}

我正在从 ChatMainScreen 导航到另一个屏幕到出现此问题的新屏幕（ChatRoom）。（ChatMainScreen => ChatRoom）

如果我用另一个材质应用程序包装我的 ChatMainScreen ，它似乎可以工作。但是在一个材料应用程序中再有另一个材料应用程序可以吗？

此外，材质应用程序父级到 ChatMainScreen 的路由返回无法正常工作。如果我从 ChatRoom 屏幕按后退按钮，它不会弹出回 chatMainScreen，而是弹出到我推送到 ChatMainScreen 的屏幕上

Answer 1

使用时Provider理解context很重要。要在任何地方都可以访问提供者，您可以将其放在上面MaterialApp，它就可以正常工作。现在MaterialApp，flutter 肯定会Navigator在内部创建一个对象，以便它可以维护子路由的堆栈，并且拥有MultiProvider上述对象可以让您访问这些提供程序。

在你的情况下，你似乎不想让 Provider 位于 MaterialApp 之上，所以我可以想到两种解决方案：

1. 在您的Chat小部件中，您已创建MultiProvider并使用ChatMainScreen小部件作为子部件，因此这很好，因为在您的 ChatMainScreen小部件的上下文中MultiProvider，您可以访问它。您在您的某个地方ChatMainScreen推送了另一条打开小部件的路线ChatRoom。如果您想访问中提到的提供商，MultiProvider您需要点MultiProvider赞：

Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => MultiProvider(
          providers: [
            ChangeNotifierProvider.value(value: Provider.of<ChatProvider>(context,
                  listen: false),
          ...
           ],
          child: ChatRoom()
         
 

使用ChangeNotifierProvider.value将使您可以访问新路线中的同一提供商。

2. 在小部件中自己创建一个新的导航器堆栈Chat。

 return MultiProvider(
      providers: [
        ChangeNotifierProvider<ChatProvider>( create: (context) => ChatProvider()),
        ChangeNotifierProvider<MessageProvider>( create: (context) => MessageProvider()),
      ],
      child: Navigator(
              onGenerateRoute: (RouteSettings settings) {
                return MaterialPageRoute(
                  builder: (context) {
                    return ChatMainScreen();
      
     
    );

我认为第一个解决方案可能更适合您，并且您的应用程序中不应有超过 1 个小MaterialApp部件。