1

我正在创建一个具有底部导航栏的应用程序。在该底部导航栏中，它有 5 个项目名称，即个人资料、关于我们、主页、通知和购物车。每个项目名称都有自己的页面。现在的问题是我在主页中添加了一个按钮，如果我单击该按钮，它将转到新页面，但它不显示底部导航栏。我如何在新页面中显示底部导航栏以及选定的当前索引。下面是飞镖代码

主页.dart

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final tabs = [
    Profile(),
    AboutUs(),
    Home(),
    Notifications(),
    CartPage(),
  ];

  @override
  void initState() {
    super.initState();
    _currentIndex = 2;
  }

  @override
  Widget build(BuildContext context) {
    return Consumer<Cart>(
      builder: (context, cart, child) {
        return PlatformScaffold(
          body: tabs[_currentIndex],
          bottomNavBar: PlatformNavBar(
            android: (_) => MaterialNavBarData(
              type: BottomNavigationBarType.fixed,
            ),
            ios: (_) => CupertinoTabBarData(),
            currentIndex: _currentIndex,
            itemChanged: (index) => setState(
              () {
                _currentIndex = index;
              },
            ),
            items: [
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => Icon(CupertinoIcons.person),
                  android: (_) => Icon(Icons.person),
                ),
                title: Text('Profile'),
              ),
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => Icon(CupertinoIcons.info),
                  android: (_) => Icon(Icons.info),
                ),
                title: Text('About Us'),
              ),
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => Icon(CupertinoIcons.home),
                  android: (_) => Icon(Icons.home),
                ),
                title: Text('Home'),
              ),
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => new Image.asset(
                    "assets/notification.png",
                    height: 21.0,
                    color: Colors.grey[600],
                  ),
                  android: (_) => Icon(Icons.notifications),
                ),
                title: Text(
                  'Notifications',
                  style: TextStyle(fontSize: 12.0),
                ),
              ),
              BottomNavigationBarItem(
                icon: PlatformWidget(
                  ios: (_) => Icon(CupertinoIcons.shopping_cart),
                  android: (_) => Stack(
                    children: <Widget>[
                      Icon(Icons.shopping_cart),
                      cart.count == 0 ? new Container(height: 0, width: 0,)
                          : new Positioned(
                              right: 0,
                              child: new Container(
                                padding: EdgeInsets.all(1),
                                decoration: new BoxDecoration(
                                  color: Colors.red,
                                  borderRadius: BorderRadius.circular(6),
                                ),
                                constraints: BoxConstraints(
                                  minWidth: 12,
                                  minHeight: 12,
                                ),
                                child: new Text(
                                  '${cart.count}',
                                  style: new TextStyle(
                                    color: Colors.white,
                                    fontSize: 8,
                                  ),
                                  textAlign: TextAlign.center,
                                ),
                              ),
                            )
                    ],
                  ),
                ),
                title: Text('Cart'),
              ),
            ],
          ),
        );
      },
    );
  }
}

主页.dart

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: (){
            Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => NewPage()));
          },
          child: Text('New Page'),
        ),
      ),
    );
  }
}

新页面.dart

class NewPage extends StatefulWidget {
  @override
  _NewPageState createState() => _NewPageState();
}

class _NewPageState extends State<NewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
      ),
    );
  }
}
4

2 回答 2

1

我使用这种方法来添加一个所有页面通用的小部件：

MaterialApp(
  title: 'Flutter Demo',
  initialRoute:"/home",
  routes: [
   ...
  ],
  builder: (context, child) {
    return Stack(
      children: [
        child!,
        Overlay(
          initialEntries: [
            OverlayEntry(
              builder: (context) {
                return YourCustomWidget(); *//This widget now appears on all  pages*
              },
            ),
          ],
        ),
      ],
    );
  },
);
于 2021-12-15T14:40:21.680 回答
0

您可以将 aScaffold作为所有这些页面的父级，并将 aBottomNavigationBar在 上Scaffold，并将 aPageView作为body的Scaffold：

Scaffold(
      body: PageView(
        controller: MyController(),
        children: [
          MyPage1(),
          MyPage2(),
          //...
        ],
        onPageChanged: myOnPageChanged,
      ),
      bottomNavigationBar: MyNavBar(),
    )
于 2020-05-01T19:46:57.713 回答