flutter - BottomNavigationBar 颜色错误更改

Question

我有一个有颜色的底部导航栏。当我单击最后一个按钮时，颜色变为白色......

最后一个按钮显示一些我可以刷的卡。为此，我在这里使用代码：https ://github.com/devefy/Flutter-Story-App-UI

我试图用其他东西改变 return container() ，但没有什么是有益的。

这是我的代码

  void _onItemTapped(int index) {
    setState(() {
      if (edifice != null) _selectedIndex = index;
    });
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.unEdifice.vocable),
        backgroundColor: color_edifices,
      ),
      body: Center(
        child: edifice == null
            ? CircularProgressIndicator()
            : _selectedIndex == 5
                ? SingleChildScrollView(
                    child: Column(
                      children: <Widget>[
                        Stack(
                          children: <Widget>[
                            CardScrollWidget(currentPage),
                            Positioned.fill(
                              child: PageView.builder(
                                itemCount: edifice.commentaires.length,
                                controller: controller,
                                reverse: true,
                                itemBuilder: (context, index) {
                                  return Container(
                                  );
                                },
                              ),
                            )
                          ],
                        ),
                      ],
                    ),
                  )
                : _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            backgroundColor: color_edifices,
            icon: Icon(GaeoIcons.church, color: Colors.white),
            title: Text('Edifice', style: buttonTextStyle),
          ),
          BottomNavigationBarItem(
            icon: Icon(GaeoIcons.location_on, color: Colors.white),
            title: Text('Adresses', style: buttonTextStyle),
          ),
          BottomNavigationBarItem(
            icon: Icon(GaeoIcons.group, color: Colors.white),
            title: Text('Responsables', style: buttonTextStyle),
          ),
          BottomNavigationBarItem(
            icon: Icon(GaeoIcons.truck, color: Colors.white),
            title: Text('Distributions', style: buttonTextStyle),
          ),
          BottomNavigationBarItem(
            icon: Icon(GaeoIcons.group, color: Colors.white),
            title: Text('Contacts', style: buttonTextStyle),
          ),
          BottomNavigationBarItem(
            icon: Icon(GaeoIcons.comment, color: Colors.white),
            title: Text('Commentaires', style: buttonTextStyle),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}`

您可以通过包含的图片了解我的意思

谢谢你的帮助

标签： flutter

Answer 1

我已尝试使用 Story App UI 模拟您的情况，
请尝试
1. 添加 BottomNavigationBar 的 backgroundColor
2. 使用 BottomNavigationBarType.fixed 和 fixedColor 进行测试

还参考Flutter BottomNavigationBar 颜色

代码片段

bottomNavigationBar: BottomNavigationBar(
            backgroundColor: Colors.brown,
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.white,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                backgroundColor: Colors.white,
                icon: Icon(Icons.access_time, color: Colors.white),
                title: Text('Edifice', ),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.access_alarm, color: Colors.white),
                title: Text('Adresses', ),
              ),
            ],

          )

使用 BottomNavigationBar 的 Story App UI 测试结果