flutter - 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

之所以会出现阴影，是因为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),
            ),
          ),
        ],
      ),

输出:



更新:脚手架颜色更改

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