Flutter BottomNavigationBar 组件

BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，bottomNavigationBar是 Scaffold 组件的参数

image

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('hello BottomNavigationBar')),
        body: MyBody(),
        bottomNavigationBar:BottomNavigationBar(
          items: [
              BottomNavigationBarItem(
                title:Text("首页"),
                icon:Icon(Icons.home)
              ),
              BottomNavigationBarItem(
                title:Text("分类"),
                icon:Icon(Icons.category)
              ),
              BottomNavigationBarItem(
                title:Text("设置"),
                icon:Icon(Icons.settings)
              )
          ],
        )
      )
    );
  }
}

• BottomNavigationBar 常见的属性

属性名	说明
items	List<BottomNavigationBarItem> 底部导航条按钮集合
iconSize	icon
currentIndex	默认选中第几个
onTap	选中变化回调函数
fixedColor	选中的颜色
type	BottomNavigationBarType.fixed / BottomNavigationBarType..shifting
unselectedItemColor	Colors.grey
selectedItemColor	Colors.blue
backgroundColor	Theme.of(context).primaryColor

有一点需要知道的是Flutter的BottomNavigationBar如果不指定type，则当items小于4个时，类型是fixed，大于或等于4个时，自动变成了shifting，所以好多大于等于4个时出现背景色文字消失问题，此时指定 type: BottomNavigationBarType.fixed

• 下面有个小demo 目录结构为和main.dart相邻有个bottomBar文件夹，以下除了main.dart，其余都是这个目录下

image

代码

main.dart

import 'package:flutter/material.dart';
import 'bottomBar/mainPage.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MainPage());
  }
}

mainPage

import 'package:flutter/material.dart';
import 'classifyPage.dart';
import 'homePage.dart';
import 'findPage.dart';
import 'setingPage.dart';

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

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _tabIndex = 0;
  List _pageList = [
    new MyHomePage(),
    new ClassifyPage(),
    new SetingPage(),
    new FindPage()
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('hello BottomNavigationBar')),
        body: this._pageList[_tabIndex],
        bottomNavigationBar: myBottomBar(context));
  }

  Widget myBottomBar(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: this._tabIndex,
      type: BottomNavigationBarType.fixed,
      iconSize: 24.0,
      items: [
        BottomNavigationBarItem(title: Text("首页"), icon: Icon(Icons.home)),
        BottomNavigationBarItem(title: Text("分类"), icon: Icon(Icons.category)),
        BottomNavigationBarItem(title: Text("设置"), icon: Icon(Icons.settings)),
        BottomNavigationBarItem(
            title: Text('发现'),
            icon: Image.asset('images/find.png', width: 24.0, height: 24.0))
      ],
      onTap: (index) {
        setState(() {
          _tabIndex = index;
        });
      },
    );
  }
}

homePage

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHomePage> {
  List dataList = new List();
  @override
  Widget build(BuildContext context) {
    return ListView(children: [
      Column(
          children: this.dataList.map((value) {
        return ListTile(
          title: Text(value),
        );
      }).toList()),
      SizedBox(height: 20),
      Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
        RaisedButton.icon(
            onPressed: () {
              setState(() {
                this.dataList.add('新增数据${this.dataList.length + 1}');
              });
            },
            icon: Icon(Icons.add),
            label: Text('加'),
            color: Colors.green),
        RaisedButton.icon(
            onPressed: () {
              setState(() {
                if (this.dataList.length > 0) {
                  this.dataList.removeLast();
                }
              });
            },
            icon: Icon(Icons.remove),
            label: Text('减'))
      ])
    ]);
  }
}

classifyPage

import 'package:flutter/material.dart';

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

  @override
  _ClassifyPageState createState() => _ClassifyPageState();
}

class _ClassifyPageState extends State<ClassifyPage> {
  final time = new DateTime.now();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(children: <Widget>[Text('分类$time')]),
    );
  }
}

setingPage

import 'package:flutter/material.dart';

class SetingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('设置')
    );
  }
}

findPage

import 'package:flutter/material.dart';

class FindPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('发现')
    );
  }
}

• 最后就是pubspec.yaml里面，图片直接上iconfont网站下载就行

  assets:
    - images/find.png
    - images/find_selected.png
    - images/home.png
    - images/home_selected.png
    - images/mine.png
    - images/mine_selected.png
    ```