1. 基本介绍
FloatingActionButton 是一个悬浮在屏幕上方的按钮，常用于 Scaffold.floatingActionButton。
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. 属性介绍
| FloatingActionButton属性 | 介绍 |
|---|---|
| child | 子控件，通常为 Icon |
| tooltip | 长按时显示的提示语 |
| foregroundColor | Icon 与 Text 颜色 |
| backgroundColor | 背景色 |
| focusColor | 聚焦色 |
| hoverColor | 悬浮色 |
| splashColor | 点击时的颜色 |
| heroTag | 标记 |
| elevation | 阴影高度 |
| focusElevation | 聚焦时阴影高度 |
| hoverElevation | 悬浮时阴影高度 |
| highlightElevation | 高亮时阴影高度 |
| disabledElevation | 不可用时阴影高度 |
| onPressed | 点击事件 |
| mouseCursor | 鼠标悬停，Web可以了解 |
| mini | 默认 false，默认按钮为 56 * 56，当mini 为 true 时，默认大小为 40 * 40，边框padding 各为 4，所以布局大小为 48 * 48 |
| shape | 自定义形状 |
| clipBehavior | 边缘裁剪方式，默认为 Clip.none |
| focusNode | 焦点节点，例如监听 focusNode 可以实现输入框的开始、结束输入 |
| autofocus | 自动聚焦，默认为 false |
| materialTapTargetSize | 点击区域大小，MaterialTapTargetSize.padded时最小点击区域为48*48，MaterialTapTargetSize.shrinkWrap 时为子组件的实际大小。 |
| isExtended | 默认为 false，当使用 extended 方法时为 true |
| extended.icon | 设置 Icon（该属性为扩展属性） |
| extended.label | 设置 label（@requirded，该属性为扩展属性） |
4. FloatingActionButton 组件
4.1 容器创建
优雅的编程，首先创建一个 floatingActionButton.dart 文件。我们创建一个底部带 BottomAppBar 的页面。
import 'package:flutter/material.dart';
class FMFloatingActionButtonVC extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("FloatingActionButton"),
),
floatingActionButton: _floatingActionButton(),
// floatingActionButton: _customFloatingActionButton(),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
bottomNavigationBar: _bottomAppBar(),
);
}
FloatingActionButton _floatingActionButton(){
return FloatingActionButton(
child: Icon(Icons.ac_unit),
);
}
FloatingActionButton _customFloatingActionButton(){
return FloatingActionButton.extended(
onPressed: null,
icon: Icon(Icons.ac_unit),
label: Text("悬浮按钮"),
);
}
BottomAppBar _bottomAppBar(){
return BottomAppBar(
child: Container(
height: 50,
child: Row(
children: [
Expanded(
child: Container(
child: Text("底"),
alignment: Alignment.center,
),
),
Expanded(
child: Container(
child: Text("部"),
alignment: Alignment.center,
),
),
Expanded(
child: Container(
child: Text("按"),
alignment: Alignment.center,
),
),
Expanded(
child: Container(
child: Text("钮"),
alignment: Alignment.center,
),
),
],
),
),
);
}
}
FAB normal.png
4.2 FloatingActionButton 样式
FloatingActionButton 有两种样式，圆形与自适应。
4.2.1 圆形样式
最简单常用的样式，child 可以给任意 widget，但是不会改变大小与形状。当 child 尺寸超出时会抛出异常。
FloatingActionButton _floatingActionButton(){
return FloatingActionButton(
child: Icon(Icons.ac_unit),
);
}
FAB circle.png
4.2.2 自适应样式
基于 Text 的自适应按钮。
FloatingActionButton _customFloatingActionButton(){
return FloatingActionButton.extended(
onPressed: null,
icon: Icon(Icons.ac_unit),
label: Text("悬浮按钮"),
);
}
FAB custom normal.png
FAB custom text.png
FAB custom too long.png
4.2.3 样式差异
我们来看一下 FloatingActionButton 与 FloatingActionButton.extended 源码。
FloatingActionButton 源码。
const FloatingActionButton({
Key key,
this.child,
this.tooltip,
this.foregroundColor,
this.backgroundColor,
this.focusColor,
this.hoverColor,
this.splashColor,
this.heroTag = const _DefaultHeroTag(),
this.elevation,
this.focusElevation,
this.hoverElevation,
this.highlightElevation,
this.disabledElevation,
@required this.onPressed,
this.mouseCursor,
this.mini = false,
this.shape,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
this.materialTapTargetSize,
this.isExtended = false,
})
FloatingActionButton.extended 源码。
FloatingActionButton.extended({
Key key,
this.tooltip,
this.foregroundColor,
this.backgroundColor,
this.focusColor,
this.hoverColor,
this.heroTag = const _DefaultHeroTag(),
this.elevation,
this.focusElevation,
this.hoverElevation,
this.splashColor,
this.highlightElevation,
this.disabledElevation,
@required this.onPressed,
this.mouseCursor = SystemMouseCursors.click,
this.shape,
this.isExtended = true,
this.materialTapTargetSize,
this.clipBehavior = Clip.none,
this.focusNode,
this.autofocus = false,
Widget icon,
@required Widget label,
})
不难看出，extended 方法增加 icon 与 label 两个属性，注意 label 使用 @required 修饰的，也就是使用 extended 方法时，必须传入 label 入参。
4.3 自适应按钮边框的不规则 BottomAppBar。
作为题外话插一下，不规则 bottomAppBar 的使用，根据 FloatingActionButton 外围，来挤开 bottomAppBar，完成按钮悬浮，且挤开 BottomAppBar 的效果。
BottomAppBar _bottomAppBar(){
return BottomAppBar(
shape: CircularNotchedRectangle(),
elevation: 20,
notchMargin: 12,
child: Container(
height: 50,
child: Row(
children: [
Expanded(
child: Container(
child: Text("底"),
alignment: Alignment.center,
),
),
Expanded(
child: Container(
child: Text("部"),
alignment: Alignment.center,
),
),
Expanded(
child: Container(
child: Text("按"),
alignment: Alignment.center,
),
),
Expanded(
child: Container(
child: Text("钮"),
alignment: Alignment.center,
),
),
],
),
),
);
}
简单介绍一下相关属性
| BottomAppBar属性 | 介绍 |
|---|---|
| shape | NotchedShape 类型，可以用来做不接触的效果 |
| elevation | BottomAppBar 的阴影高度，默认为 8.0 |
| notchMargin | 不接触效果的间隔距离 |
FAB notch.png
4.4 颜色与提示
具体描述见上方属性介绍，这里把改过的颜色与效果展示一下。
FloatingActionButton _floatingActionButton(){
return FloatingActionButton(
child: Icon(Icons.ac_unit),
tooltip: "我就简单的介绍一下吧",
foregroundColor: Colors.pink,
backgroundColor: Colors.yellow,
splashColor: Colors.blue,
);
}
FAB colors.gif
4.5 形状与边框
更多样式可以参考 Flutter 组件之 RaisedButton 详解 3.3，此处不做详解。
FloatingActionButton _floatingActionButton(){
return FloatingActionButton(
child: Icon(Icons.ac_unit),
tooltip: "我就简单的介绍一下吧",
foregroundColor: Colors.pink,
backgroundColor: Colors.yellow,
splashColor: Colors.blue,
onPressed: (){
print("test");
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: BorderSide(
width: 2,
color: Colors.red,
),
),
);
}
FAB border.png
4.6 点击事件
使用 onPressed 属性为 FloatingActionButton 添加一个点击事件，上述均有点击事件，不做过多介绍。
注意：onPressed == null 时，splashColor 不会产生效果。
5. 技术小结
- FloatingActionButton 简单实用，但是实际用到的地方会很少。
- 自定义形状与边框其实在其他组件里用法基本相同。
- 多加练习实用，很容易上手。