flutter 修复整个应用中的底部导航栏

Question

我想在整个应用程序中使用底部导航栏，并在为我的应用程序中的所有路由路由的底部导航集中使用。

首先设置底部导航 -> 然后在每个索引中路由页面。 但我不知道怎么做。 有谁知道我该怎么做？ 或者有人有我的问题的简单源代码？ 谢谢。

我想使用路由处理底部导航中的页面

Answer 1

我遇到过这个问题，你可以试试这个，我使用的是IndexedStack并在其中添加了Navigator

根页面：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class BasePageSmall extends StatefulWidget {
  @override
  _BasePageSmallState createState() => _BasePageSmallState();
}

class _BasePageSmallState extends State<BasePageSmall> {
  int _currentIndex = 0;
  List<Widget> pages = [
    HomePageSmall(),
    CartBase(),
    SettingsPageSmall(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        //elevation: 0,
        //type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        showSelectedLabels: false,
        showUnselectedLabels: false,
        items: [
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.home),
            label: "",
            tooltip: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.shopping_cart),
            label: "",
            tooltip: context.l10n.cart,
          ),
          BottomNavigationBarItem(
            icon: Icon(CupertinoIcons.gear_alt),
            label: "",
            tooltip: context.l10n.settings,
          ),
        ],
        onTap: (index) {
          setState(
            () {
              _currentIndex = index;
            },
          );
        },
      ),
    );
  }
}

在这种情况下，我使用 HomePageSmall 例如

import 'package:flutter/material.dart';

class HomePageSmall extends StatefulWidget {
  @override
  _HomePageSmallState createState() => _HomePageSmallState();
}

class _HomePageSmallState extends State<HomePageSmall> {
  @override
  Widget build(BuildContext context) {
    return Column(
   children: [
     Expanded(
        child: Row(
          children: [
            Expanded(
              child: IndexedStack(
                index: 0,
                children: [
                  Navigator(
                    initialRoute: '/',
                    onPopPage: (route, setting) => route.didPop(setting),
                    onGenerateRoute: (setting) {
                    final routes = {
                      '/': (context) => MainPageSmall(),
                      '/close-shift': (context) => CloseShiftPageSmall(),
                    };

                    return MaterialPageRoute(
                      builder: (context) {
                        return routes[setting.name!]!(context);
                      },
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    ),
    ]);
  }
}

抱歉我的代码不好，希望它有帮助！