Flutter 底部导航条组件

Flutter 底部导航条组件(BottomNavigationBar)，BottomNavigationBar是底部导航条，可以很容易地在tap之间切换和浏览顶级视图。很多App主页底部都采用这种切换的方式。

BottomNavigationBar组件常见属性见表：

BottomNavigationBar通常显示在应用页面底部。由按钮加文字组成，这可以根据实际应用场景任意组合。按下按钮可切换不同的页面，所以需要一个当前索引来控制当前具体切换的页面。布局示例如图所示：

接下来是一个示例代码，仿一个聊天软件，底部显示“信息”“通讯录”“发现”按钮。这个界面的排列方式类似微信。按钮是以图标加文本方式显示，切换不同的按钮时，中间显示切换的内容。示例中用到了状态控制，用来控制当前切换按钮的索引值。

完整的示例代码如下：

  import 'package:flutter/material.dart';

  void main() => runApp(MyApp());

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: MyHomePage(),
        ),
      );
    }
  }

  class MyHomePage extends StatefulWidget {
    MyHomePage({Key key}) : super(key: key);

    @override
    _MyHomePageState createState() => _MyHomePageState();
  }
class _MyHomePageState extends State<MyHomePage> {
  // 当前选中项的索引
  int _selectedIndex = 1;
  // 导航栏按钮选中对应数据
  final _widgetOptions = [
    Text('Index 0: 信息'),
    Text('Index 1: 通讯录'),
    Text('Index 2: 发现'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 顶部应用按钮
      appBar: AppBar(
        title: Text('BottomNavigationBar示例'),
      ),
      // 中间内容显示区域
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex), //居中显示某一个文本
      ),
      // 底部导航按钮集
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          // 底部导航按钮项，包含图标及文本
          BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('信息')),
          BottomNavigationBarItem(icon: Icon(Icons.contacts), title: Text('通讯录')),
          BottomNavigationBarItem(icon: Icon(Icons.account_circle), title: Text('发现')),
        ],
        currentIndex: _selectedIndex,  //当前选中项的索引
        fixedColor: Colors.deepPurple, //选项中项的颜色
        onTap: _onItemTapped,           //选择按下处理
      ),
    );
  }

  // 选择按下处理，设置当前索引为index值
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

上述示例代码的视图展现大致如图所示：

酷客教程相关文章：

• Flutter 应用按钮组件(AppBar)
• Flutter 脚手架组件(Scaffold)
• Flutter 应用组件(MaterialApp)
• Flutter 表单组件