Question

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

Mainpage.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'),
              ),
            ],
          ),
        );
      },
    );
  }
}

Homepage.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'),
        ),
      ),
    );
  }
}

Newpage.dart

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

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

Answer 1

您可以将Scaffold作为所有这些页面的父级，并在BottomNavigationBar上具有Scaffold，将PageView作为body Scaffold：

Scaffold(
      body: PageView(
        controller: MyController(),
        children: [
          MyPage1(),
          MyPage2(),
          //...
        ],
        onPageChanged: myOnPageChanged,
      ),
      bottomNavigationBar: MyNavBar(),
    )

如何在flutter的所有页面中显示底部导航栏

1 个答案: