FloatingActionButton簡稱FAB，可以實現(xiàn)浮動按鈕，也可以實現(xiàn)類似咸魚app 的凸起導航按鈕

一. FloatingActionButton常用屬性

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

二.咸魚凸起按鈕實現(xiàn)

1.咸魚效果

image.png

2.實現(xiàn)思路：用浮動按鈕蓋住tab按鈕

image.png

3.代碼實現(xiàn)

• Scaffold組件 添加floatingActionButton按鈕，修改floatingActionButton的大小和顏色 為合適狀態(tài)
• 通過設置margin 來調(diào)整 floatingActionButton 的位置
• Scaffold組件 添加floatingActionButton按鈕，修改floatingActionButton的大小和顏色 為合適狀態(tài)
• Scaffold組件 添加BottomNavigationBar 底部按鈕

class TrackerMainScreen extends StatefulWidget {

  const TrackerMainScreen(this._deviceId);
  BottomButton createState() => BottomButton();
}
class BottomButton extends State<TrackerMainScreen> {
  var currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Container(
        height: 80,
        width: 80,
        margin: EdgeInsets.only(bottom: 15),
        padding: EdgeInsets.all(10),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(40), color: Colors.white),
        child: FloatingActionButton(
          child: Icon(Icons.info),
          onPressed: () {
            print("點擊浮動按鈕");
          },
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: currentIndex,
        onTap: (int index) {
          setState(() {
            this.currentIndex = index;
          });
        },
        fixedColor: Colors.pink,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
              title: Text("首頁", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.list, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("發(fā)布", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.satellite, color: Colors.grey)),
          BottomNavigationBarItem(
              title: Text("故事", style: TextStyle(color: Colors.grey)),
              icon: Icon(Icons.account_balance, color: Colors.grey)),
        ],
      ),
      body: Container(color: Colors.amber,),
    );
  }
}

4.效果圖

image.png

三. 注意

• BottomNavigationBar 和FloatingActionButton 都在Scaffold 組件中創(chuàng)建
• BottomNavigationBarItem中的icon 是必須寫的
• 凸起按鈕實現(xiàn)思路：用FloatingActionButton蓋住BottomNavigationBar