Flutter 中的底部导航栏样式

Question

我有两个问题，

第一个问题：为什么，当我尝试在底部导航栏中使用backgroundColor: Colors.transparent时，我的栏看起来像这样？

我的代码：

  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: _pageOptions[_selectedPage],
        bottomNavigationBar: new Theme(
          data: Theme.of(context).copyWith(
            // canvasColor: Colors.transparent

          ),
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedFontSize: 18,
          unselectedFontSize: 12,
          currentIndex: _selectedPage,
          showSelectedLabels: true,
          onTap: (int index){
            setState(() {
              _selectedPage = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon:Padding(
                padding: EdgeInsets.only(left:10.0, right: 10.0)),
                title: Text('MAPS', style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold)),

            ),
            BottomNavigationBarItem(
              icon:Padding(
                padding: EdgeInsets.only(left:10.0, right: 10.0)),
              title: Text('HOME', style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold))
            ),
            BottomNavigationBarItem(
              icon:Padding(
                padding: EdgeInsets.only(left:10.0, right: 10.0)),
              title: Text('PROFILE', style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold))
            ),
          ]
        ),
        )
      )
    );
  } 

第二个问题：如何在导航栏中的项目上方添加轮廓，以及如何更改其宽度，例如当您选择maps时，轮廓应该有例如 15px 和其他两个 5px 等。

像这样的人：

感谢您的任何答案:)

Answer 1

首先，当您使用backgroundColor: Colors.transparent时，它似乎不是您提到的问题，但是当您使用canvasColor: Colors.transparent时，它的显示与您提到的图像完全一样。

所以，你可以使用

1. backgroundColor: Colors.transparent

或者

2. scaffoldBackgroundColor: Colors.transparent

Answer 2

你得到那个阴影是因为 BottomNavBar 的默认高度是 8.0 将它更改为 0.0

      bottomNavigationBar: BottomNavigationBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        items: [
          BottomNavigationBarItem(
            icon: Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0)),
            title: Text(
              'MAPS',
              style: TextStyle(
                letterSpacing: 2.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0)),
            title: Text(
              'HOME',
              style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0)),
            title: Text(
              'PROFILE',
              style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),

Output：

更新：脚手架颜色变化

class New extends StatefulWidget {
  @override
  _NewState createState() => _NewState();
}

class _NewState extends State<New> {

  List<Color> scaffoldColors = [Colors.white, Colors.green, Colors.blue];
  List<Widget> bodies = [
    Container(
      child: Center(
        child: Text("MAP", style: TextStyle(color: Colors.black),),
      ),
    ),
    Container(
      child: Center(
        child: Text("HOME", style: TextStyle(color: Colors.black),),
      ),
    ),
    Container(
      child: Center(
        child: Text("PROFILE", style: TextStyle(color: Colors.black),),
      ),
    ),
  ];
  var index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: scaffoldColors[index],
      body: bodies[index],
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        items: [
          BottomNavigationBarItem(
            icon: Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0)),
            title: Text(
              'MAPS',
              style: TextStyle(
                letterSpacing: 2.0,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0)),
            title: Text(
              'HOME',
              style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(padding: EdgeInsets.only(left: 10.0, right: 10.0)),
            title: Text(
              'PROFILE',
              style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold),
            ),
          ),
        ],
        currentIndex: index,
        onTap: (index){
          setState(() {
            this.index = index;
          });
        },
      ),
    );
  }
}