1.概要
如果说，需求想要在页面中增加一个悬浮于页面的按钮，如下所示：
image.png
那么，这个需求Flutter可很快帮你实现，使用Scaffold的floatingActionButton属性，传给他一个FloatingActionButton即可。
2.源码
FloatingActionButton({
Key key,
// 按钮子Widget，一般是个Icon
this.child,
// 长按提示内容
this.tooltip,
// 前景色
this.foregroundColor,
// 背景色
this.backgroundColor,
// 成为焦点时颜色
this.focusColor,
// 悬停时颜色
this.hoverColor,
// 飞溅效果颜色
this.splashColor,
// 按钮的hero标签
this.heroTag = const _DefaultHeroTag(),
// 按钮高度
this.elevation,
// 焦点时高度
this.focusElevation,
// 悬停时高度
this.hoverElevation,
// 长按时高度
this.highlightElevation,
// 不能点击时高度
this.disabledElevation,
// 点击时回调
@required this.onPressed,
// 光标样式
this.mouseCursor,
// 按钮大小，默认56*56，mini时是40*40
this.mini = false,
// 按钮形状
this.shape,
// 裁剪方式
this.clipBehavior = Clip.none,
// 焦点节点
this.focusNode,
// 自动聚焦
this.autofocus = false,
// 点击区域大小，padded为48*48，skrinkWrap时为实际大小
this.materialTapTargetSize,
// 当继承FloatingActionButton时，需要设置为true
this.isExtended = false,
})
3.示例
class MyHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.forward),
),
);
}
}
image.png
此时，如果我们底部有Tabbar，效果会是这样。
image.png
在Flutter中，FloatingActionButton可以和BottomNavigationBar有一个神奇的配合，他们两个可以组合到一起。只需要设置Scaffold的
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,即可。效果：
image.png
floatingActionButtonLocation属性有很多种组合方式，例如将按钮放到中间等等，这里就不仔细说了。
最终示例代码：
class MyHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
floatingActionButton: FloatingActionButton(
child: Icon(Icons.forward),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
bottomNavigationBar: BottomNavigationBar(
items: [
BottomNavigationBarItem(
icon: Icon(Icons.fire_extinguisher_sharp),
label: "第一个"
),
BottomNavigationBarItem(
icon: Icon(Icons.fire_extinguisher_sharp),
label: "第二个"
),
],
currentIndex: 0,
onTap: (index) {
print("点击$index");
},
),
);
}
}
