Можно ли скрыть / показать элементы в BottomNavigationBar во Flutter? - PullRequest
Новая
       11

Можно ли скрыть / показать элементы в BottomNavigationBar во Flutter?

2 голосов
/ 03 августа 2020

Я хочу скрыть / показать элементы в BottomNavigationBar с помощью Flutter. Например, у меня есть 4 элемента: Дом, Профиль, Карта, Учетная запись. Я хочу скрыть / показать страницу карты на основе значения (0/1) из переменной showCard. Если showCard == 0, BottomNavigationBar будет показывать только Домашнюю страницу, Профиль и Учетную запись, в противном случае BottomNavigationBar покажет Дом, Профиль, Карту и Учетную запись. Ниже мой код. 

return Scaffold(
    body: PageView(
      physics: NeverScrollableScrollPhysics(),
      controller: _pageController,
      children: <Widget>[
        //homePage
        Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                boxShadow: [
                  new BoxShadow(blurRadius: 15.0, color: Colors.blue)
                ],
              ),
              child: homePage,
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: bottomNavigationBar,
            ),
          ],
        ),
        //cardPage
        showCard != 0
        ? Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                boxShadow: [
                  new BoxShadow(blurRadius: 15.0, color: Colors.blue)
                ],
              ),
              child: cardPage,
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: bottomNavigationBar,
            ),
          ],
        )
            : Container(),
        //profilePage
        Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                boxShadow: [
                  new BoxShadow(blurRadius: 15.0, color: Colors.blue)
                ],
              ),
              child: profilePage,
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: bottomNavigationBar,
            ),
          ],
        ),
        //accountPage
        Stack(
          children: <Widget>[
            Container(
              decoration: BoxDecoration(
                boxShadow: [
                  new BoxShadow(blurRadius: 15.0, color: Colors.blue)
                ],
              ),
              child: accountPage,
            ),
            Positioned(
              left: 0,
              right: 0,
              bottom: 0,
              child: bottomNavigationBar,
            ),
          ],
        ),
      ],
    )
);

Ниже виджет bottomNavigationBar: 

Widget get bottomNavigationBar {
return ClipRRect(
  borderRadius: BorderRadius.only(
    topRight: Radius.circular(40),
    topLeft: Radius.circular(40),
  ),
  child: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        activeIcon: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Icon(Icons.brightness_1, size: 30.0, color: Colors.amber),),
            Icon(Icons.account_balance),
          ],
        ),
        icon:  Icon(Icons.account_balance),
        title: Text(
          "home",
          style: TextStyle(fontSize: 12.0),
        ),
      ),
      BottomNavigationBarItem(
        activeIcon: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Icon(Icons.brightness_1, size: 30.0, color: Colors.amber),),
            Icon(Icons.card_travel),
          ],
        ),
        icon:  Icon(Icons.card_travel),
        title: Text(
          "card",
          style: TextStyle(fontSize: 12.0),
        ),
      ),
      BottomNavigationBarItem(
        activeIcon: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Icon(Icons.brightness_1, size: 30.0, color: Colors.amber),),
            Icon(Icons.panorama),
          ],
        ),
        icon:  Icon(Icons.panorama),
        title: Text(
          "profile",
          style: TextStyle(fontSize: 12.0),
        ),
      ),
      BottomNavigationBarItem(
        activeIcon: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 5.0),
              child: Icon(Icons.brightness_1, size: 30.0, color: Colors.amber),),
            Icon(Icons.radio),
          ],
        ),
        icon:  Icon(Icons.radio),
        title: Text(
          "account",
          style: TextStyle(fontSize: 12.0),
        ),
      ),
    ],
    selectedItemColor: Colors.greenAccent,
    backgroundColor: Colors.white,
    onTap: onTapped,
    currentIndex: currentTabIndex,
    type: BottomNavigationBarType.fixed,
  ),
);

}

1 Ответ

2 голосов
/ 03 августа 2020

Да, и это настолько просто, что когда вы переходите с других языков, это нелогично:

Просто добавьте if прямо внутри массива: 

if(showCard != 0)

Вот так: 

BottomNavigationBar(
    items: [
      BottomNavigationBarItem(),
      BottomNavigationBarItem(),
      if(showCard != 0) BottomNavigationBarItem(),
      BottomNavigationBarItem(),
    ])

Для этого вам понадобится Dart 2.3, но он вышел более года назад go, вы уже должны его использовать.

...