Flutter:如何设置底部导航栏的样式

时间:2019-08-31 22:01:08

标签: flutter

在设计底部浮动导航栏时,我需要一些帮助。

目前,我拥有第一张图片,并且想要样式像第二张图片

基本上。我想在上方画一条线,选择该项目时该线会更粗

Widget _bottomNavigationBar(int selectedIndex) {
    return BottomNavigationBar(
      backgroundColor: Palette.TAUPE,
      onTap: (int index) {
        setState(() {
          userModel.selectedIndex = index;
        });
      },
      currentIndex: userModel.selectedIndex,
      items: <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Container(
            margin: EdgeInsets.only(top: 20.0),
            child: Image.asset(
              "assets/images/search_nav_icon.png",
              height: 20.0,
              width: 20.0,
            ),
          ),
          title: Text(''),
        ),
        BottomNavigationBarItem(
            icon: Container(
              margin: EdgeInsets.only(top: 20.0),
              child: Image.asset(
                "assets/images/fav_nav_icon.png",
                height: 20.0,
                width: 20.0,
              ),
            ),
            title: Text('')),
        BottomNavigationBarItem(
          icon: Container(
            margin: EdgeInsets.only(top: 20.0),
            child: Image.asset(
              "assets/images/user_nav_icon.png",
              height: 20.0,
              width: 20.0,
              alignment: Alignment.center,
            ),
          ),
          title: Text(''),
        ),
      ],
    );
  }

enter image description here

如您所见,在底部导航栏上方有一行,并且在选中项目为bar时该行较粗

enter image description here

0 个答案:

没有答案