Flutter 之 BottomNavigationBar （六

BottomNavigationBar 提供了常见的底部导航条功能。

1. BottomNavigationBar

BottomNavigationBar 定义

  BottomNavigationBar({
    Key? key,
    required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation,
    this.type,
    Color? fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color? selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme,
    this.unselectedIconTheme,
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels,
    this.showUnselectedLabels,
    this.mouseCursor,
    this.enableFeedback,
    this.landscapeLayout,
  }) 

BottomNavigationBar 属性

属性	介绍
items	必填项，设置各个按钮,
onTap	点击事件
currentIndex	当前选中 item 下标
elevation	控制阴影高度，默认为 8.0
type	BottomNavigationBarType，默认 fixed，设置为 shifting 时，建议设置选中样式，为选中样式，提供一个特殊动画
fixedColor	选中 item 填充色
backgroundColor	整个 BottomNavigationBar 背景色
iconSize	图标大小，默认 24.0
selectedItemColor	选中 title 填充色
unselectedItemColor	未选中 title 填充色
selectedIconTheme	选中 item 图标主题
unselectedIconTheme	未选中 item 图标主题
selectedFontSize	选中 title 字体大小，默认14.0
unselectedFontSize	未选中 title 字体大小，默认12.0
selectedLabelStyle	选中 title 样式 TextStyle
unselectedLabelStyle	未选中 title 样式 TextStyle
showSelectedLabels	是否展示选中 title，默认为true
showUnselectedLabels	是否展示未选中 title，默认为true
mouseCursor	鼠标悬停 Web 开发可以了解
enableFeedback	是否启动点击反馈 例如 安卓上的长按震动
landscapeLayout	横向布局方式 横屏时有效

2. 示例

2.1 示例1

class MSBottomNavigationBarDemo1 extends StatefulWidget {
  const MSBottomNavigationBarDemo1({Key? key}) : super(key: key);

  @override
  State<MSBottomNavigationBarDemo1> createState() =>
      _MSBottomNavigationBarDemo1State();
}

class _MSBottomNavigationBarDemo1State
    extends State<MSBottomNavigationBarDemo1> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("MSBottomNavigationBarDemo1")),
      body: Center(
        child: Text("Demo"),
      ),
      bottomNavigationBar: BottomNavigationBar(
        // items
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.favorite), label: "Favorite")
        ],
        // 当前选中Index
        currentIndex: _currentIndex,
        // 点击事件
        onTap: (index) {
          _currentIndex = index;
          setState(() {});
          print("BottomNavigationBar on Tap $index");
        },
      ),
    );
  }
}

92.gif

• onTap 点击事件
• currentIndex 当前选中Index
• items List<BottomNavigationBarItem>

2.2 示例2

class MSBottomNaviagtionBarDemo2 extends StatefulWidget {
  const MSBottomNaviagtionBarDemo2({Key? key}) : super(key: key);

  @override
  State<MSBottomNaviagtionBarDemo2> createState() =>
      _MSBottomNaviagtionBarDemo2State();
}

class _MSBottomNaviagtionBarDemo2State
    extends State<MSBottomNaviagtionBarDemo2> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("MSBottomNaviagtionBarDemo2")),
      body: Center(child: Text("Demo")),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(
              icon: Icon(Icons.favorite), label: "Favorite"),
          BottomNavigationBarItem(icon: Icon(Icons.people), label: "Group"),
          // BottomNavigationBarItem(icon: Icon(Icons.settings), label: "Setting"),
        ],
        // 当前选中Index
        currentIndex: _currentIndex,
        // 点击事件
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        elevation: 10.0, // 阴影高度
        // fixedColor: Colors.cyan[200], // 选中 item 填充色
        backgroundColor: Colors.grey[200], // 整个 BottomNavigationBar 背景色
        iconSize: 28.0, // 图标大小，默认 24.0
        selectedItemColor:
            Colors.amber, // fixedColor 和 selectedItemColor 都是选中时Item颜色，不能同时指定
        unselectedItemColor: Colors.cyan, // 未选中时 Item颜色
        selectedIconTheme: IconThemeData(
            color: Colors.red, opacity: 1.0, size: 24), // 选中时，Icon主题
        unselectedIconTheme: IconThemeData(
            color: Colors.red, opacity: 0.5, size: 20), // 未选中时，Icon主题
        selectedFontSize: 16.0, // 选中时文字大小
        unselectedFontSize: 14.0, // 未选中时文字大小
        selectedLabelStyle:
            TextStyle(fontWeight: FontWeight.w700, fontSize: 18.0), // 选中时 文本样式
        unselectedLabelStyle:
            TextStyle(fontWeight: FontWeight.w300, fontSize: 12.0), // 未选中时 文本样式

        showSelectedLabels: true, // 选中时 是否显示title
        showUnselectedLabels: true, // 未选中时 是否显示title
        type: BottomNavigationBarType
            .shifting, // BottomNavigationBarType，默认 fixed，设置为 shifting 时，建议设置选中样式，为选中样式，提供一个特殊动画
        enableFeedback: true, // 是否启动点击反馈 例如 安卓上的长按震动
      ),
    );
  }
}

注意

• fixedColor 和 selectedItemColor 不能同时指定
• 如果指定了selectedIconTheme 和 unselectedIconTheme，iconSize、selectedItemColor、unselectedItemColor 可能会失效
• 如果指定了selectedLabelStyle、unselectedLabelStyle，selectedFontSize、unselectedFontSize 失效

93.gif

2.3 示例3

BottomNavigationBar 一般和IndexedStack 配合使用

class MSBottomNavigationDemo3 extends StatefulWidget {
  const MSBottomNavigationDemo3({Key? key}) : super(key: key);

  @override
  State<MSBottomNavigationDemo3> createState() =>
      _MSBottomNavigationDemo3State();
}

class _MSBottomNavigationDemo3State extends State<MSBottomNavigationDemo3> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("MSBottomNavigationDemo3")),
      body: IndexedStack(
        index: _currentIndex,
        children: [
          MSHomePage(),
          MSSearchPage(),
          MSGroupPage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.black),
              activeIcon: Icon(Icons.home, color: Colors.red),
              label: "Home"),
          BottomNavigationBarItem(
              icon: Icon(Icons.search, color: Colors.black),
              activeIcon: Icon(Icons.search, color: Colors.red),
              label: "Search"),
          BottomNavigationBarItem(
              icon: Icon(Icons.people, color: Colors.black),
              activeIcon: Icon(Icons.people, color: Colors.red),
              label: "Group"),
        ],
        currentIndex: _currentIndex,
        onTap: (index) {
          _currentIndex = index;
          setState(() {});
        },
        selectedItemColor: Colors.red,
        type: BottomNavigationBarType.shifting,
      ),
    );
  }
}

class MSHomePage extends StatelessWidget {
  const MSHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Home"),
      ),
    );
  }
}

class MSSearchPage extends StatelessWidget {
  const MSSearchPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Search"),
      ),
    );
  }
}

class MSGroupPage extends StatelessWidget {
  const MSGroupPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Group"),
      ),
    );
  }
}

94.gif