FloatingActionButton也是经常用的,除了常见的悬浮在右下角的一个按钮,还可以利用floatingActionButtonLocation属性,控制位置的展示。
- floatingActionButtonLocation
源码:
// Flutter 默认对其方式
static const FloatingActionButtonLocation endFloat = _EndFloatFloatingActionButtonLocation();
//居中[FloatingActionButton],浮动在屏幕底部。
static const FloatingActionButtonLocation centerFloat = _CenterFloatFloatingActionButtonLocation();
static const FloatingActionButtonLocation endDocked = _EndDockedFloatingActionButtonLocation();
static const FloatingActionButtonLocation centerDocked = _CenterDockedFloatingActionButtonLocation();
static const FloatingActionButtonLocation startTop = _StartTopFloatingActionButtonLocation();
static const FloatingActionButtonLocation miniStartTop = _MiniStartTopFloatingActionButtonLocation();
static const FloatingActionButtonLocation endTop = _EndTopFloatingActionButtonLocation();
//..
使用:
属性可自行尝试
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
- 闲鱼app底部导航中间凸起的一个按钮。就是利用FloatingActionButton实现的
Scaffold(
body: this._mList[this.currentIndex],
bottomNavigationBar: _getBottomNavigationBar(),
floatingActionButton: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(30),
),
padding: EdgeInsets.all(5),
margin: EdgeInsets.only(top: 20),
width: 55,
height: 55,
child: FloatingActionButton(
foregroundColor: Colors.red,
// 利用三元表达式控制选中时的颜色
backgroundColor:
currentIndex == 1 ? Color(0xff46CAD0) : Colors.blue,
//点击时按钮的阴影效果
highlightElevation: 0,
elevation: 0,
child: IconButton(
icon: Image.asset(
"images/tax_unselect.png",
color: Colors.white,
width: 20,
height: 20,
)),
onPressed: () {
setState(() {
// 选中时更改currentIndex值,这样就可以实现点击FloatingActionButton,同步切花底部导航对应的界面
this.currentIndex = 1;
});
}),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
效果: