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<EachView> {
  @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<Widget> _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<BottomAppBarWidget> {
  List<Widget> _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: <Widget>[//添加工具栏子部件
               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 
                  });
                 },
               ),
             ],
           ),
        ),
    );
  }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值