Flutter中的底部导航栏样式

debugcn 发表于 Dev

用户名

我有两个问题，

第一个问题：为什么当我尝试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等）。

像这样的人：

感谢您的任何答案:)

宙斯

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