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,
      ),
    );
  }
}`

您会明白我所含图片的意思

感谢您的帮助

Answer 1

我已尝试使用Story App UI模拟您的案例
请尝试
1.添加BottomNavigationBar的backgroundColor
2.使用BottomNavigationBarType.fixed和fixedColor

进行测试

另请参阅Flutter BottomNavigationBar Colors

代码段

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的结果

BottomNavigationBar颜色错误地更改

1 个答案: