Flutter 学习笔记 | 底部导航栏 BottomNavig

 底部导航栏是一个很基础的东西，大部分App中都会应用到，首先学习的当然就是它了。

效果图

 仿微信页面，咳...最后一个页面有些懒了

底部导航组件 - BottomNavigationBar

 效果图底部使用BottomNavigationBar实现，应用在Scaffold里面的bottomNavigationBar中，也就是底部导航。如下所示（直接复制会是一个坑，需修改其中的某些东东）：

Scaffold(
  bottomNavigationBar: BottomNavigationBar(
    // 设置底部tab的样式，它有两种样式fixed和shifting，超过3个才会有区别
    type: BottomNavigationBarType.fixed,
    // 组件选中后的颜色
    fixedColor: Colors.green,
    // 当前显示的指针
    currentIndex: currentIndex,
    // BottomNavigationBarItem 数组
    items: bottomTabs,
    // 点击时间 index(点击后的指针)
    onTap: (index) {
      // 通知状态更新
      setState(() {
        currentIndex = index;
      });
    },
  ),// BottomNavigationBar
  // 需要显示的页面
  body: tabBodies[currentIndex],
);

底部导航实现过程

 一、快进中....(创建工程 > 删除main.dart文件内容 > 重新写一个MyApp())
 二、更改main.dart中的build函数.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        theme: ThemeData(
          // 主题颜色更改
          primaryColor:  Color.fromRGBO(237, 237, 237, 1.0)
        ),
        title: 'custom app',
        // index_page.dart 中的 IndexPage 
        home: IndexPage(),
      ),
    );
  }
}

 三、在工程目录新建一个index_page.dart，在文件里敲击一番（写了一个IndexPage）

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
@override
  Widget build(BuildContext context) {
    return Container();
  }
}

 四、新建home_page.dart、person_page.dart、found_page.dart、my_page.dart并在其中敲好代码，然后在index_page.dart中的_IndexPageState里敲一个List。

// 四个页面
final List tabBodies =[  
  HomePage(), // 消息
  PersonPage(), // 通讯录
  FoundPage(), // 发现
  MyPage()  // 我
];

 五、同在_IndexPageState中新敲一个List（底部导航列表）。然后再加一个int类型的指针int currentIndex。

// 底部导航栏列表
final List<BottomNavigationBarItem> bottomTabs = [
  BottomNavigationBarItem(// 第一个导航按钮
      icon: Icon(Icons.chat), title: Text('消息')), 
  BottomNavigationBarItem(// 第二个导航按钮
      icon: Icon(Icons.perm_contact_calendar), title: Text('通讯录')),
  BottomNavigationBarItem(// 第三个导航按钮
      icon: Icon(Icons.language), title: Text('发现')),
  BottomNavigationBarItem(// 第四个导航按钮
      icon: Icon(Icons.perm_identity), title: Text('我')),
];

// 导航指针 默认指向 0
int currentIndex = 0;

 六、重写_IndexPageState的build方法。然后run一下就看到效果了。

@override
Widget build(BuildContext context) {
  return Scaffold(
    bottomNavigationBar: BottomNavigationBar(
      // 设置底部tab的样式，它有两种样式fixed和shifting，超过3个才会有区别
      type: BottomNavigationBarType.fixed,
      // 组件选中后的颜色
      fixedColor: Colors.green,
      // 当前显示的指针
      currentIndex: currentIndex,
      // BottomNavigationBarItem 数组
      items: bottomTabs,
      // 点击时间 index(点击后的指针)
      onTap: (index) {
        // 通知状态更新
        setState(() {
          currentIndex = index;
        });
      },
    ),
    // 需要显示的页面
    body: tabBodies[currentIndex],
  );
}

难点攻略

 条目间的下划线 这个线比较奇特，是用了Container部件中的decoration，在底部直接装饰了一条线。decoration:BoxDecoration(border: Border(bottom: BorderSide(color:Color.fromRGBO(237, 237, 237, 1.0))));

 设置背景颜色后 InkWell 的水波纹效果消失 这个有点坑，但还是解决了，只要在外面包裹一个 Material()，再设置颜色即可

Material(
  color: Colors.white,
  child: InkWell(
    onTap: () {},
    child: ...,
  )
)