Flutter 如何在多個 web 路由之間制作一個通用的小部件？

Question

簡而言之：如何在路由更改時不刷新的路由之間創建一個通用小部件？

---

In Long：有什么方法可以創建一個 Flutter 容器，它覆蓋整個 web 頁面，導航欄除外，並根據導航欄上的按鈕點擊刷新容器內的小部件？

我想要什么應用程序布局：

Material App
 |
 --Navigation Bar
 |  |
 |   -- Button 1 (Current User Screen)
 |   -- Button 2 
 |   -- Button 3
 |
 -- Container (Current User Screen: Associated With Button 1)
    |
     -- A List Of Widgets Associated with Button 1
     -- A List Of Widgets Associated with Button 2
     -- A List Of Widgets Associated with Button 3
  

我已經嘗試過的：

• 創建一個帶有 4 個按鈕的導航欄。
• 創建路線並將初始路線設置為第一個按鈕內容。

我嘗試過的缺點：

• 我必須在每條路線上放置 NavigationBar()。
• 更改路線后，會刷新 NavigationRoute()。

單擊導航中的另一個按鈕時：它也會刷新導航欄。 我希望 bar 成為路由之間的通用小部件，因此路由更改應該只影響根 Material App 容器中的內容更改。

Answer 1

我這樣做了（不是完整的代碼，而是想法）：

通用小部件包裝器：

class ContentPage extends StatefulWidget {
  ContentPage({required this.title, required this.body});
  final String title;
  final Widget body;
}

class _ContentPageState extends ... {
  Widget build(BuildContext context) {
    return Title(
      title: widget.title,
      color: Colors.blue,
      child: Scaffold(
        body: Row(
          children: [
            SidebarWidget(),                   // contains navigation
            const VerticalDivider(width: 1),
            ContentWidget(child: widget.body), // wrapper for all content widgets
          ],
        ),
      ),
    );
  }
}

MaterialApp 中的路由處理：

MaterialApp(
  ...
  onGenerateRoute: (routeSettings) {
    final uri = Uri.parse(routeSettings.name!);
    final currentPath = uri.path;
    if(currentPath == '/login') {
      return MaterialPageRoute(
        builder: (context) => LoginPage(),
        settings: RouteSettings(name: currentPath),
      );
    }
    final pageData = getPageWidgetAndTitleForTheRoute(currentPath);
    return MaterialPageRoute(
      builder: (context) {
        return ContentPage(
          title: pageData.title,
          body: pageData.builder(context),
        );
      },
      settings: RouteSettings(name: currentPath);
    );
  },
  ...
);

路由 map 在 function getPageWidgetAndTitleForTheRoute中使用。

final routingMap = {
  '/login': {
    'title': 'Login', 
    'widget': LoginPage(),
  },
  '/home': {
    'title': 'Home', 
    'widget': HomePage(),
  },
  ...
};