运行 Flutter 默认的 Demo 可以发现右下角的有一个加号按钮
这个加号按钮正好在屏幕的右下角的那个位置,就是通过 FloatingActionButton 实现的
Scalfold
组件中有下面三个属性:
this.floatingActionButton,
this.floatingActionButtonLocation,
this.floatingActionButtonAnimator,
通过 floatingActionButton
可以指定一个 Widget,然后通过 floatingActionButtonLocation
可以指定 floatingActionButton 的位置
一个 FloatingActionButton 的简单使用:
floatingActionButton: FloatingActionButton(
elevation: 0,
child: Icon(
Icons.add,
size: 30,
),
onPressed: () {},
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
效果:
上面这个示例就是类似于 Flutter Demo 的按钮示例
闲鱼应该是目前国内使用 Flutter 最大的团队吧
我们只是使用 floatingActionButton 模拟一个这样的发布按钮,闲鱼上,这个 Widget 或者是绘制应该是自己封装的或者是 Native 注册的
首先分析下,实现这样的按钮需要做什么:
bottomNavigationBar: BottomNavigationBar(
selectedFontSize: 12,
unselectedFontSize: 12,
unselectedItemColor: Colors.black,
selectedItemColor: Colors.blue,
items: [
BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('首页')),
BottomNavigationBarItem(icon: Icon(Icons.add), title: Text('发布')),
BottomNavigationBarItem(icon: Icon(Icons.settings), title: Text('设置')),
],
),
效果:
简单模拟了一下:
class FloatingActionButtonDemo extends StatelessWidget {
const FloatingActionButtonDemo({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(4),
margin: EdgeInsets.only(top: 5),
height: 50,
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
color: Colors.white,
),
child: FloatingActionButton(
elevation: 0,
backgroundColor: Colors.yellow,
child: Icon(
Icons.add,
color: Colors.black,
size: 30,
),
onPressed: () {},
),
);
}
}
按钮的样式效果:
floatingActionButton: FloatingActionButtonDemo(),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
从 Scalfold.floatingActionButton
支持 Widget 就可以看出,可以配置任何我们需要的 Widget,并且放在需要的位置
比如这个 发布按钮 其实并不一定需要使用 FloatingActionButton ,比如我完全可以使用 Container 直接画出来
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(4),
margin: EdgeInsets.only(top: 5),
height: 50,
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(60),
color: Colors.yellow,
border: Border.all(color: Colors.white, width: 2.0)
),
child: Icon(Icons.add, color: Colors.black, size: 30),
);
}
效果其实一些样:
如果需要点击,则直接在 Container 外面加一个可点击的 Widget 即可,可点击 Wdiget 可以选择 InkWell
https://github.com/postbird/FlutterHelloWorldDemo/blob/master/demo1/lib/bak/main.37-FloatingActionButton%26%E9%97%B2%E9%B1%BC.dart