Flutter中的浮動按鈕FloatingActionButton 及融合底部工具欄

FloatingActionButton 簡稱 FAB，從字面理解可以看出，它是“可交互的浮動按鈕”,其實在Flutter默認生成的代碼中就有這家伙，只是我們沒有正式的接觸。

一般來說，它是一個圓形，中間放着圖標，會優先顯示在其他Widget的前面。一般可以實現浮動按鈕，也可以實現類似閑魚 app 的底部凸起導航 。

常用屬性

FloatingActionButton的常用屬性，同flutter中其他按鈕的常用屬性大部分相同，但是也有特殊的：

• child ：子視圖，一般為 Icon，不推薦使用文字
• tooltip FAB： 被長按時顯示，也是無障礙功能
• backgroundColor： 背景顏色
• elevation ：未點擊的時候的陰影
• hignlightElevation ：點擊時陰影值，默認 12.0
• onPressed ：點擊事件回調
• shape ：可以定義 FAB 的形狀等
• mini： 是否是 mini 類型默認 false 

import 'package:flutter/material.dart';

void main(){ runApp(MyApp());}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:HomeContent(), 
    );
  }
}

class HomeContent extends StatelessWidget{
   int _counter = 0; //聲明計數器 

   void _incrementCounter(){
    setState(() { _counter++; });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
          title:Text("flutter demo")
       ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             Text('點一次增加一個數字'),
             Text(
               '$_counter',
               style: Theme.of(context).textTheme.display1,
             ),
           ],
         ),
       ),
       floatingActionButton: FloatingActionButton(
         onPressed: _incrementCounter,
         tooltip: 'Increment',
         child: Icon(Icons.add),
       ),
    );
  }
}

FloatingActionButton與BottomAppBar的結合

我們來看一下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,

不規則的底部導航欄完整代碼如下：

  import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp>  {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: BottomAppBarDemo(), //不規則的底部導航
    );
  }
}

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

class _BottomAppBarDemoState extends State<BottomAppBarDemo> {
  List<Widget> _eachView;
  int _index = 0;
  @override
  void initState() {
    _eachView = List();
    _eachView..add(EachView('Home'))..add(EachView('User')); 
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(  //浮動交互按鈕
        onPressed: (){
          Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context) {
            return EachView('New Page');
          } ));
        },
        tooltip: '新建頁', //長按提示
        backgroundColor:Colors.red, //背景顏色
        child:Icon(Icons.add,color: Colors.white,)
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //融合底部工具欄
      bottomNavigationBar: BottomAppBar( //底部工具欄
        color: Colors.red,
        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.airplay),
              color: Colors.white,
              onPressed: (){
                setState(() {
                  _index = 1; 
                });
              },
            ),
            
          ],
        ),
      ),
      body:_eachView[_index],
    );
  }
}

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)),
      body: Center(
        child: Text(widget._title),
      ),
    );
  }
}

 如果還是跳上次的子頁，代碼如下:

  void initState() {
    _eachView = List();
    _eachView
      // ..add(EachView('Home'))
      // ..add(EachView('User')); 
      ..add(Contacts())
      ..add(Personal());
    super.initState();
  }

還要記得頭部要import的子頁