Блог

я возлюсь с макетом приложения и использую панель навигации, но мой первый элемент всегда активируется, независимо от того, нажимаю я его или нет. есть идеи?

мои ярлыки также после первого элемента не отображаются.

   @override
  Widget build(BuildContext context) {
    return Scaffold(

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
        ),

      bottomNavigationBar: BottomAppBar(
        notchMargin: 5,
        shape: CircularNotchedRectangle(),
       // color: Colors.black,
        child:
            BottomNavigationBar(
          elevation: 50,
          //backgroundColor: Colors.black,
          unselectedItemColor: Colors.black,
          selectedItemColor: Colors.green,
          items: [
//the first one is always activated
            BottomNavigationBarItem(
              icon: Icon(Icons.accessibility_new),
              label: ("Lo"),
              activeIcon: Icon(Icons.book),
             //IF I add background color here it will fill the entire bar
              //backgroundColor: Colors.green,
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.book),
              label: ("Ed"),
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.access_time),
                label: ("Pi"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.accessible_sharp),
              label: ("ac"),
            ),
          ],
        ),
      ),
    );
  }
}
 

Используйте переменную для хранения текущего выбранного индекса

 int selectedIndex = 0;
// ....

bottomNavigationBar: BottomAppBar(
  notchMargin: 5,
  child: BottomNavigationBar(
    unselectedItemColor: Colors.black,
    selectedItemColor: Colors.green,
    onTap: (index) {
      setState(() {
        selectedIndex = index;
      });
    },
    currentIndex: selectedIndex,
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.accessibility_new),
        label: ("Lo"),
        activeIcon: Icon(Icons.book),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.book),
        label: ("Ed"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.access_time),
        label: ("Pi"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.accessible_sharp),
        label: ("ac"),
      ),
    ],
  ),
),
 

Чтобы (невыбранные) метки отображались правильно, попробуйте добавить эту строку в свою BottomNavigationBar:

 showUnselectedLabels: true,
 

Если это не работает, возможно, ваши невыбранные метки имеют тот же цвет, что и фон.

Удачи с вашим проектом ;).
-Седрик