flutter-不规则底部工具栏BottomAppBar

Flutter支持自定义主题:

theme: ThemeData(primarySwatch: Colors.orange),

floatingActionButton：“可交互的浮动按钮”，它是一个圆形，中间放着图标，优先显示在其它Widget的前面。类似一个悬浮按钮，常用属性如下：

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

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

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

悬浮按钮和底部工具栏融合属性：

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

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

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

bottom_navigation_widget.dart代码如下：

import 'package:flutter/material.dart';

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: (){},
        tooltip: 'Add',
        child: Icon(Icons.add, color: Colors.white),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue, 
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(icon: Icon(Icons.home), onPressed: (){}, color: Colors.white,),
            IconButton(icon: Icon(Icons.person), onPressed: (){}, color: Colors.white,),
          ],
        ),
      ),
    );
  }
}

main.dart代码如下：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.orange),
      home: BottomNavigationWidget(),
    );
  }
}

 子页面动态渲染，view.dart代码如下：

import 'package:flutter/material.dart';

class View extends StatefulWidget {
  String curTitle;
  View(this.curTitle);

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

class _ViewState extends State<View> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.curTitle)),
      body: Center(child: Text(widget.curTitle)),
    );
  }
}

按钮的交互事件，交互的动作分两种：

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

onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){
            return View('new page');
          }));
        },

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

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

 

底部工具栏bottom_navigation_widget.dart:

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

class BottomNavigationWidget extends StatefulWidget {
  @override
  _BottomNavigationWidgetState createState() => _BottomNavigationWidgetState();
}

class _BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  List<Widget> views = List();
  int curIndex = 0;
  @override
  void initState() { 
    super.initState();
    views 
      ..add(View('首页'))..add(View('我的'));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: views[curIndex],
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){
            return View('new page');
          }));
        },
        tooltip: 'Add',
        child: Icon(Icons.add, color: Colors.white),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue, 
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(icon: Icon(Icons.home), onPressed: (){
              setState(() {
                curIndex = 0;
              });
            }, color: Colors.white,),
            IconButton(icon: Icon(Icons.person), onPressed: (){
              setState(() {
                curIndex = 1;
              });
            }, color: Colors.white,),
          ],
        ),
      ),
    );
  }
}

主入口main.dart:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.orange),
      home: BottomNavigationWidget(),
    );
  }
}