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）