flutter - 如何在 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)

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

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

Answer 1

使用Provider时，了解上下文非常重要。要在任何地方访问 Provider，您可以将其放在 MaterialApp 之上，它就可以正常工作。现在，flutter 中的 MaterialApp 肯定会在内部创建一个 Navigator 对象，以便它可以维护一个子路由堆栈，并在其上方拥有 MultiProvider对象允许您访问这些提供程序。

就您的情况而言，您似乎不希望在 MaterialApp 之上拥有 Provider，因此我可以想到两种解决方案:

1. 在您的 Chat 小部件中，您已经创建了 MultiProvider 并使用 ChatMainScreen 小部件作为子部件，因此这很好，因为在您的 ChatMainScreen 小部件的上下文位于 MultiProvider 下方，因此您可以访问它。在 ChatMainScreen 的某个位置，您推送另一个打开 ChatRoom 小部件的路由。如果您想访问 MultiProvider 中提到的 Provider，您需要推送 MultiProvider，如下所示:

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

使用 ChangeNotifierProvider.value 将使您能够访问新路由中的同一提供程序。

在 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 小部件。