Как отобразить нижнюю навигационную панель на всех страницах в флаттере - PullRequest
Новая
       56

Как отобразить нижнюю навигационную панель на всех страницах в флаттере

0 голосов
/ 01 мая 2020

Я создаю приложение, которое имеет нижнюю навигационную панель. В этой нижней навигационной панели есть 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(
      ),
    );
  }
}

1 Ответ

0 голосов
/ 01 мая 2020

Вы можете иметь Scaffold в качестве родителя для всех этих страниц и иметь BottomNavigationBar для Scaffold и PageView в качестве body для Scaffold: 

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