颤动BottomAppBar选择颜色答案

【问题标题】：flutter BottomAppBar selected color颤动BottomAppBar选择颜色
【发布时间】：2019-10-31 10:37:42
【问题描述】：

所以我目前的底部导航有以下内容

 bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          decoration:
          new BoxDecoration(color: new Color(0xFFFF0000)),
          height: 75,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.home),
                onPressed: () {
                  setState(() {
                     onTabTapped(0);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                //padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.view_headline),
                onPressed: () {
                  setState(() {
                    onTabTapped(2);
                  });
                },
              ),
          /*    IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(right: 28.0),
                icon: Icon(Icons.search),
                onPressed: () {
                  setState(() {
                    onTabTapped(1);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.notifications),
                onPressed: () {
                  setState(() {
                    onTabTapped(2);
                  });
                },
              ),*/
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(right: 28.0),
                icon: Icon(Icons.info_outline),
                onPressed: () {
                  setState(() {
                    onTabTapped(1);
                  });
                },
              )
            ],
          ),
        ),
      ),

但是，我注意到它不会使活动页面或选择的颜色不同。例如，我想要的是因为第一页是主页图标应该是白色而不是黑色。

我想知道我需要添加什么来制作？基本上如果选择的颜色应该是白色的。

我找到的解决方案是将代码更改为以下内容：

bottomNavigationBar: new Theme(
      data: Theme.of(context).copyWith(
    // sets the background color of the `BottomNavigationBar`
    canvasColor: Colors.red,
    // sets the active color of the `BottomNavigationBar` if `Brightness` is light
    primaryColor: Colors.black,
    textTheme: Theme
        .of(context)
        .textTheme
        .copyWith(caption: new TextStyle(color: Colors.black))), // sets the inactive color of the `BottomNavigationBar`
          child: BottomNavigationBar(
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Home'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.view_headline),
                  title: Text('News'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.more),
                  title: Text('More'),
                ),
              ],
              currentIndex: _selectedIndex,
              selectedItemColor: Colors.white,
              onTap: onTabTapped,
      ),
    ),

【问题讨论】：

您是否维护所选索引的状态？还是默认的？
是所选索引（但我希望它们都有自己的颜色）
这里有什么进展吗？

标签： flutter android-bottomappbar

【解决方案1】：

老问题，但没有答案，所以也许这将有助于指导某人

处理此问题的一种方法是使用三元组检查索引。基于 OP 的示例：

为您班级中的 int _selectedIndex 提供参考：

int _selectedIndex = 0;

BottomAppBar 中的 IconButton（我在此处删除了 setState 调用）：

IconButton(
 iconSize: 30.0,
 icon: Icon(Icons.view_headline, color: _selectedIndex == 2 ? Colors.white : Colors.black),
 onPressed: () {
  onTabTapped(2);
 },
),

您的OnTabTapped 方法：

  void onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;
      ///call your PageController.jumpToPage(index) here too, if needed
    });
  }

现在，当您点击图标时，它会更改 setState 中的 _selectedIndex 变量，然后会重建您的图标并适当地选择它们的颜色（选定的图标将为白色，其余为黑色）。

【讨论】：