Flutter 如何顯示索引堆棧中的所有頁面

Question

我正在嘗試使用下拉菜單 select 頁面並顯示所選頁面。 但是，我想通過添加一個選項來顯示所有頁面來顯示所有頁面。 如果您能幫助解決這種情況，我將不勝感激

我的代碼：

Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Padding(
                padding: Get.width >= 390.w
                    ? EdgeInsets.only(left: 250.w, right: 24.w)
                    : EdgeInsets.only(left: 250.w, right: 24.w),
                child: DropdownButtonHideUnderline(
                  child: DropdownButton(
                      hint: Text(
                        controller.selectedValue,
                        style: AppTextStyle()
                            .getSfProDisplayMedium_H6(AppColors.BLACK),
                      ),
                      value: controller.selectedValue,
                      items: controller.cardlist.map((String val) {
                        return DropdownMenuItem(
                          value: val,
                          child: Text(
                            val,
                            style: AppTextStyle()
                                .getSfProDisplayMedium_H6(AppColors.BLACK),
                          ),
                        );
                      }).toList(),
                      onChanged: (String? item) {
                        if (item == 'Tümü') {
                          controller.subPageId = 0;
                        }
                        if (item == 'Duyurular') {
                          controller.subPageId = 1;
                        }
                        if (item == 'Anketler') {
                          controller.subPageId = 2;
                        }
                        if (item == 'Sponsorlar') {
                          controller.subPageId = 3;
                        }
                        controller.update();
                      }),
                ),
              ),
            ],
          ),
          IndexedStack(
            index: controller.subPageId,
            children: [
              PostCardWidget(),
              QuestionnaireCardWidget(),
              SponsoredCardWidget()
            ],
          ),

我想在選擇“Tümü”選項時顯示三個頁面

Answer 1

navigator 使用字符串管理其路由，這意味着我們需要有一種方法將您的枚舉（我將其重命名為 Page）轉換為字符串。 我們可以為此使用 describeEnum 並將其放入擴展中：

enum Page { screenDashboard, screenProfile, screenSearch }

extension on Page {
  String get route => describeEnum(this);
}

現在，您可以使用例如 Page.screenDashboard.route 獲取頁面的字符串表示形式。

此外，您希望將您的實際頁面 map 到您的片段小部件，您可以這樣做：

class MainBodyApp extends HookWidget {
  final Map<Page, Widget> _fragments = {
    Page.screenDashboard: DashboardPage(),
    Page.screenProfile: UserProfilePage(),
    Page.screenSearch: SearchPage(),
  };
  ...

要訪問 Navigator，我們需要一個 GlobalKey。 通常我們會有一個 StatefulWidget 並像這樣管理 GlobalKey。 由於您想使用flutter_hooks，我選擇使用 GlobalObjectKey 代替：

@override
  Widget build(BuildContext context) {
    final navigatorKey = GlobalObjectKey<NavigatorState>(context);
  ...

現在，您可以在小部件中的任何位置使用 navigatorKey.currentState 來訪問此自定義導航器。 完整的 Navigator 設置如下所示：

Navigator(
  key: navigatorKey,
  initialRoute: Page.screenDashboard.route,
  onGenerateRoute: (settings) {
    final pageName = settings.name;

    final page = _fragments.keys.firstWhere((element) => describeEnum(element) == pageName);

return MaterialPageRoute(settings: settings, builder: (context) => _fragments[page]);

}, ) 如您所見，我們傳遞了之前創建的 navigatorKey 並定義了一個 initialRoute，利用了我們創建的路由擴展。 在 onGenerateRoute 中，我們找到與路由名稱（一個字符串）對應的 Page 枚舉條目，然后返回一個帶有適當 _fragments 條目的 MaterialPageRoute。

要推送新路由，您只需使用 navigatorKey 和 pushNamed：

onPressed: () => navigatorKey.currentState.pushNamed(Page.screenDashboard.route),