Flutter进阶实战 3-20 不规则底部工具栏BottomAppBar 制作（1）

前言：大部分的底部导航都是中规中矩的，但有些时候也需要突出个性，比如在中间部位增加一个突出的按钮。

实现界面效果：

实现过程：

1、自定义主题样本

Flutter支持自定义主题，如果使用自定义主题，设置的内容项是非常多的，这可能让初学者头疼，Flutter贴心的为给我们准备了主题样本。

primarySwatch ：现在支持18种主题样本了。

 具体代码如下：

theme: ThemeData(
  primarySwatch: Colors.lightBlue,
),

会了这个知识后，我们就可以先把我们的主入口文件编写一下了，具体代码如下：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(//设置主题
        primarySwatch: Colors.blue,
      ),
      home: BottomAppBarWidget(),
    );
  }
}

这时候bottom_appBar_demo.dart这个文件还没有，也找不到，这个文件是我们的主要文件，我们的主要业务逻辑会写在这个文件里。

因为没有所以你写完之后会报错，那接下来我们就来编写这个文件。

2、floatingActionButton Widget

floatingActionButton工作中我们通常简称它为“FAB”，也许只是我们公司这样称呼，从字面理解可以看出，它是“可交互的浮动按钮”,其实在Flutter默认生成的代码中就有这家伙，只是我们没有正式的接触。

一般来说，它是一个圆形，中间放着图标，会优先显示在其他Widget的前面。

下面我们来看看它的常用属性:

• onPressed ：点击相应事件，最常用的一个属性。

• tooltip：长按显示的提示文字，因为一般只放一个图标在上面，防止用户不知道，当我们点击长按时就会出现一段文字性解释。非常友好，不妨碍整体布局。

• child ：放置子元素，一般放置Icon Widget。

我们来看一下floatingActionButton的主要代码:

floatingActionButton: FloatingActionButton(
    onPressed: (){
      Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
        return EachView('New Page');
      }));
    },
    tooltip: 'Increment',
    child: Icon(
      Icons.add,
      color: Colors.white,
    ),
  ),

写完这些代码已经有了一个悬浮的按钮，但这个悬浮按钮还没有和低栏进行融合，这时候需要一个属性。

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

这时候就可以和底栏进行融合了。

3、BottomAppBar Widget

BottomAppBar 是 底部工具栏的意思，这个要比BottomNavigationBar widget灵活很多，可以放置文字和图标，当然也可以放置容器。

BottomAppBar的常用属性:

• color:这个不用多说，底部工具栏的颜色。
• shape：设置底栏的形状，一般使用这个都是为了和floatingActionButton融合，所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形。
• child ： 里边可以放置大部分Widget，让我们随心所欲的设计底栏。

这节课先来看看这个布局，下节课我们再添加交互效果。

本节课主要代码：

import 'package:flutter/material.dart';

/**
 * 底部导航栏和悬浮按钮制作
 */
class BottomAppBarWidget extends StatefulWidget {
  _BottomAppBarWidgetState createState() => _BottomAppBarWidgetState();
}

class _BottomAppBarWidgetState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //添加一个悬浮按钮
        floatingActionButton: FloatingActionButton(
          onPressed: (){},  //按钮点击事件
          tooltip: 'add page',   //按钮长按提示
          child: Icon(
            Icons.add,
            color:Colors.white
          ),
        ),

        //悬浮按钮和底部工具栏进行融合
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

        //添加底部工具栏
        bottomNavigationBar: BottomAppBar(
           color: Colors.blue,
           //设置底栏的形状，一般使用这个都是为了和floatingActionButton融合，所以使用的值都是CircularNotchedRectangle(),有缺口的圆形矩形。
           shape: CircularNotchedRectangle(),
           child: Row(
             mainAxisSize: MainAxisSize.max,//自动填充工具栏布局
             mainAxisAlignment:MainAxisAlignment.spaceAround,//将水平主轴空白区域均分，使中间各个子控件间距相等，首尾子控件间距为中间子控件间距的一半
             children: [//添加工具栏子部件
               IconButton(
                 icon: Icon(Icons.home),
                 color: Colors.white,
                 onPressed: (){},
               ),
               IconButton(
                 icon: Icon(Icons.hotel),
                 color: Colors.white,
                 onPressed: (){},
               ),
             ],
           ),
        ),
    );
  }
}