Flutter——FloatingActionButton組件（浮動按鈕組件）

FloatingActionButton 簡稱 FAB ,可以實現浮動按鈕，也可以實現類似閑魚 app 的地步凸起導航。

 

 

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

 

 

FloatingActionButton實現閑魚APP底部凸起按鈕：

 

 

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: "FloatingActionButton",
    home: MyApp(),
  ));
}

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

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;
  List _pageList = [
    Page("閑魚頁面"),
    Page("魚塘頁面"),
    Page("發布頁面"),
    Page("消息"),
    Page("我的")
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.yellow,
        onTap: (int index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("閑魚", style: TextStyle(color: Colors.black54))),
          BottomNavigationBarItem(
              icon: Icon(Icons.category),
              title: Text("魚塘", style: TextStyle(color: Colors.black54))),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("發布", style: TextStyle(color: Colors.black54))),
          BottomNavigationBarItem(
              icon: Icon(Icons.message),
              title: Text("消息", style: TextStyle(color: Colors.black54))),
          BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              title: Text("我的", style: TextStyle(color: Colors.black54))),
        ],
      ),
      floatingActionButton: Container(
        margin: EdgeInsets.only(top: 5),
        child: FloatingActionButton(
          child: Icon(Icons.add, color: Colors.black54),
          backgroundColor: Colors.yellow,
          onPressed: () {
            setState(() {
              this._currentIndex = 2;
            });
          },
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

class Page extends StatelessWidget {
  String text;

  Page(this.text);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(text),
    );
  }
}