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

前言：前面博客做了一个不规则底部工具栏BottomAppBar的界面，这里继续进行完善，实现按钮的点击事件。

实现效果：

实现过程：

1、StatefulWidget子页面的制作

前面使用的子页面继承与StatelessWidget(不可变控件)，所以很麻烦的写了4个页面，其实完全可以写一个继承于StatefulWidget的控件，进行动态创建。

新建一个each_view.dart文件，然后输入如下代码：

import 'package:flutter/material.dart';

class EachView extends StatefulWidget {
   String _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),),//通过widget来调用状态类中变量title
         body: Center(
           child: Text(widget._title),
         ),
    );
  }
}

代码中设置了一个内部的_title变量，这个变量是从主页面传递过来的，然后根据传递过来的具体值显示在APP的标题栏和屏幕中间（通过widget来调用状态类中变量title）。

2、按钮交互效果的制作

这些效果都是在bottom_appBar_demo.dart页面完成的。首先我们需要引入新作的子页面each_view.dart。

import 'each_view.dart';

新建两个变量,主要作用是控制body中的试图，也就是显示不同的子页面。

  List _eachView;  //创建视图数组
  int _index = 0;          //数组索引，通过改变索引值改变视图

下一步是为_eachView进行初始化赋值，我们可以直接重写初始化方法，具体代码如下：

  @override
  void initState() {
      // TODO: implement initState
      super.initState();
      _eachView = List();
      _eachView..add(EachView('Home'))..add(EachView('Me'));
    }

剩下的就是写个个按钮的交互事件，交互的动作分两种：

• 直接打开子导航，比如我们点击了中间的”+“按钮，我们直接开启子页面。

onPressed: (){
    Navigator.of(context).push(MaterialPageRoute(builder:(BuildContext context){
      return EachView('New Page');
    }));
  },

• 改变状态，通过改变状态，来切换页面，这样我们整体页面并没有被刷新。

onPressed:(){
  setState(() {
    _index=0;             
  });
}

3、文件bottom_appBar_demo.dart所有代码如下：

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

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

class _BottomAppBarWidgetState extends State {
  List _eachView;   //创建视图数组
  int _index=0;             //数组索引，通过改变索引值改变视图

  ///为_eachView进行初始化赋值
  @override
  void initState() {
    super.initState();
    _eachView=List();//声明_eachView变量
    _eachView..add(EachView('Home'))..add(EachView('Me'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: _eachView[_index],//添加索引，显示对应界面
        //添加一个悬浮按钮
        floatingActionButton: FloatingActionButton(
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
             return EachView('New Page');    //创建新的界面
            }));
          },  //按钮点击事件
          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: (){
                   setState(() {  
                    _index=0; 
                   });
                 },
               ),
               IconButton(
                 icon: Icon(Icons.hotel),
                 color: Colors.white,
                 onPressed: (){
                  setState(() {
                    _index=1;   //更新state 
                  });
                 },
               ),
             ],
           ),
        ),
    );
  }
}