Flutter中的浮動按鈕 FloatingActionButton

FloatingActionButton 簡稱 FAB ,可以實現浮動按鈕，也可以實現類似閑魚 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:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){
            print('FloatingActionButton');
          },
        ),
        body:HomeContent() 
      )
    );
  }
}

class HomeContent extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[],
    );
  }
}

默認情況下，會在頁面的右下角生成一個藍色的浮動按鈕，我們可以在此基礎上，對顏色、位置等屬性進行相應的修改：

  

 FloatingActionButton與bottomNavigationBar的結合

 通過FloatingActionButton與bottomNavigationBar的結合，我們可以實現類似閑魚App的底部導航：

 

要實現上面的效果，有需要需要在前面的基礎上添加bottomNavigationBar：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          title:Text("flutter demo")
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add,color: Colors.black,size: 40,),
          onPressed: (){
            print('FloatingActionButton');
          },
          backgroundColor: Colors.yellow
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        body: Text("tabBar"),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("首頁")
            ),
             BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("分類")
            ),
            
             BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("設置")
            )
          ],
        ),
      )
    );
  }
}

此時，浮動按鈕是在bottomNavigationBar的上面的，因此，我們可以改動浮動按鈕的位置，使效果更貼近理想效果：

現在，稍微好了一點，但是還沒有達到理想的效果，既然位置改變不了，那么，可以通過改變大小，實現視覺的效果，前面說過，要想調節按鈕的大小，需要在按鈕的外層套一個Container，然后改變它的大小：

這個按鈕和外面的Container是一樣大的，但是在閑魚App里面，按鈕的外層是還有一圈白色邊框的，也就是需要將Container設置為白色，並留出間距：

現在效果實現了，還可以結合之前的bottomNavigationBar，在浮動按鈕上添加相應的功能：

 代碼下載：點這里（提取碼：axmg）