Flutter中的浮動按鈕 FloatingActionButton
阿新 • • 發佈:2020-08-23
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,在浮動按鈕上新增相應的功能: