（Flutter十二）不规则底部导航实现

上一个demo中，底部导航按钮的样式都是一样大小，有时候我们需要给某个按钮的样式突出显示。
1.在main.dart中的代码如下

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      //自定义主题样本
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
      ),
      home: BottomAppBarDemo(),
    );
  }
}

2.创建一个dart文件customerBottom_appBar.dart用来实现自定义底部导航的功能

import 'package:flutter/material.dart';

class BottomAppBarDemo extends StatefulWidget {
  @override
  _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(//可交互的浮动按钮
        onPressed: (){},
        tooltip: 'Hello', //长按时的提示，
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ) ,
      //设置浮动按钮的位置,centerFloat：中间但是在bottomBar上方，centerDocked:中间下沉
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: Icon(Icons.home),
              color: Colors.white,
              onPressed: (){

              },
            ),
            IconButton(
              icon: Icon(Icons.airport_shuttle),
              color: Colors.white,
              onPressed: (){
              },
            ),
          ],
        ),
      ),
    );
  }
}

上面这段代码主要是返回一个Scaffold,它由两部分组成：
一是floatingActionButton，它就是实现一个自定义的浮动按钮。
二是bottomNavigationBar，创建BottomAppBar。

给按钮添加点击效果

大致思路就是创建一个公共的页面用来保存底部两个按钮点击对应的界面。这个界面不同于上一篇的demo每个页面都创建新的dart文件。在这个demo中我们只创建一个页面，针对不同的点击效果传入不同的值到dart页面即可。

1.新建一个each_view.dart文件

import 'package:flutter/material.dart';

class EachView extends StatefulWidget {
  String _title; //title的值需要从上一个界面传入
  EachView(this._title); //传值的方法，需要上一个页面调用这个方法。

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

class _EachViewState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget._title),
      ),
      body: Center(
        child: Text(widget._title),
      ),
    );
  }
}

2.修改customerBottom_appBar.dart中的内容。
先添加头文件

import 'each_view.dart';

image.png

3.给中间的FAB浮动按钮添加点击事件。每次点击按钮的时候会跳转到一个新的页面，这个页面也是EachView模式。

floatingActionButton: FloatingActionButton(//可交互的浮动按钮
        onPressed: (){
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (BuildContext context) {
                return EachView('New Page');
              }
            )
          );
        },

4.给底部两个按钮添加点击事件

children: [
            IconButton(
              icon: Icon(Icons.home),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index = 0;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.airport_shuttle),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index = 1;
                });
              },
            ),

5.最后在body中把eachView里面的Widget赋值给body即可

return Scaffold(
      body: _eachView[_index],

这个界面的所有代码如下：

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

class BottomAppBarDemo extends StatefulWidget {
  @override
  _BottomAppBarDemoState createState() => _BottomAppBarDemoState();
}

class _BottomAppBarDemoState extends State {
  List _eachView; //存放页面的Widget
  int _index=0; //选中的下标

  @override
  void initState() { //初始化状态，给eachView添加内容
    // TODO: implement initState
    super.initState();
    _eachView = List();
    _eachView..add(EachView('Home'))
    ..add(EachView('Pages'));

  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _eachView[_index],
      floatingActionButton: FloatingActionButton(//可交互的浮动按钮
        onPressed: (){
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (BuildContext context) {
                return EachView('New Page');
              }
            )
          );
        },
        tooltip: 'Hello', //长按时的提示，
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ) ,
      //设置浮动按钮的位置,centerFloat：中间但是在bottomBar上方，centerDocked:中间下沉
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              icon: Icon(Icons.home),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index = 0;
                });
              },
            ),
            IconButton(
              icon: Icon(Icons.airport_shuttle),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index = 1;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

首页显示的页面

点击➕号按钮跳转的界面