(Flutter 十)底部导航的实现 (一)

实现一个类似iOS中的tabBar功能

代码如下：
1.main.dart中

import 'package:flutter/material.dart';
import 'bottom_navigation_widget.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fultter Buttom Navigation Bar',
      theme: ThemeData.light(),
      home: BottomNavigationWidget(), // 自定义组件实现底部导航
    );
  }
}

2.创建一个dart文件bottom_navigation_widget.dart，这里面封装了自定义底部导航的实现。

import 'package:flutter/material.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _bottomNavigationColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(//这个组件定义了头部或者底部位置，我们只管使用这些部件
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.home,
              color: _bottomNavigationColor,
            ),
            title: Text(
              'Home',
              style: TextStyle(
                color: _bottomNavigationColor
              ),
            )
          ),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.email,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Email',
                style: TextStyle(
                    color: _bottomNavigationColor
                ),
              )
          ),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.pages,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Pages',
                style: TextStyle(
                    color: _bottomNavigationColor
                ),
              )
          ),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.airplay,
                color: _bottomNavigationColor,
              ),
              title: Text(
                'Airplay',
                style: TextStyle(
                    color: _bottomNavigationColor
                ),
              )
          ),
        ],
        type: BottomNavigationBarType.fixed,
      ),

    );
  }
}

下一步将实现点击响应事件。