目录
1. 引言
FloatingActionButton（FAB）是 Material Design 中的核心交互组件，具有以下特征：
悬浮在内容层之上的圆形按钮
通常用于应用的主操作（如创建、分享）
支持图标、文字及组合内容
默认位置在屏幕右下角
设计规范对比
| 类型 | 直径 | 适用场景 |
|---|---|---|
| 标准 FAB | 56×56 dp | 主操作（单个核心功能） |
| 小型 FAB | 40×40 dp | 屏幕空间有限时使用 |
| 扩展型 FAB | 可变宽高 | 需要文字说明的复杂操作 |
2. FloatingActionButton 的基本用法
FloatingActionButton 主要通过 onPressed 绑定点击事件，并可添加 child 作为按钮内容。
FloatingActionButton(
onPressed: () {
print('FAB 被点击');
},
child: Icon(Icons.add),
)
如果 onPressed 设为 null，按钮会变为不可点击状态，跟其他按钮一样。
3. 主要属性
| 属性 | 类型 | 说明 |
|---|---|---|
| onPressed | VoidCallback | 点击回调（设为 null 时禁用） |
| child | Widget | 内容组件（通常为 Icon 或 Text） |
| backgroundColor | Color | 按钮背景色 |
| foregroundColor | Color | 图标/文字颜色 |
| shape | ShapeBorder | 按钮形状（圆形/圆角矩形等） |
| heroTag | Object | 唯一标识（多个 FAB 时必须设置） |
| mini | bool | 是否为小型 FAB（默认 false） |
| tooltip | String | 长按提示文字（无障碍支持） |
4. 进阶定制技巧
4.1 扩展型 FAB
FloatingActionButton.extended(
icon: Icon(Icons.share),
label: Text("分享到CSDN平台"),
onPressed: () {},
)4.2 动态变形动画
bool _isExpanded = false;
FloatingActionButton(
onPressed: () {
setState(() => _isExpanded = !_isExpanded);
},
child: AnimatedSwitcher(
duration: Duration(milliseconds: 300),
child: _isExpanded
? Icon(Icons.check)
: Icon(Icons.add),
),
)4.3 多个 FAB 协同
Scaffold(
floatingActionButton: Column(
mainAxisSize: MainAxisSize.min,
children: [
FloatingActionButton(
heroTag: "fab1",
child: Icon(Icons.camera),
onPressed: () {},
),
SizedBox(height: 16),
FloatingActionButton(
heroTag: "fab2",
child: Icon(Icons.mic),
onPressed: () {},
),
],
),
)5. 主题与动效集成
5.1 全局主题配置
MaterialApp(
theme: ThemeData(
floatingActionButtonTheme: FloatingActionButtonThemeData(
backgroundColor: Colors.deepOrange,
foregroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
),
)5.2 平台适配方案
dart
复制
FloatingActionButton(
shape: Platform.isIOS
? CircleBorder()
: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
)5.3 高级动画控制器
AnimationController _animationController;
@override
void initState() {
_animationController = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)..repeat(reverse: true);
}
FloatingActionButton(
backgroundColor: ColorTween(
begin: Colors.blue,
end: Colors.purple,
).animate(_animationController).value,
)6. 最佳实践
6.1 布局规范
优先使用标准尺寸（56dp）
与底部导航栏保持至少 16dp 间距
在滚动视图中自动隐藏（通过
ScaffoldMessenger）
6.2 性能优化
// 避免不必要的重建
const FloatingActionButton(
// ...
);
// 分离动画控制器
late final AnimationController _controller = AnimationController(
duration: Duration(seconds: 1),
vsync: this,
);6.3 无障碍支持
FloatingActionButton(
tooltip: '创建新文档',
onPressed: () {},
child: Icon(Icons.add),
)7. 小技巧
7.1 如何调整 FAB 位置？
Scaffold(
floatingActionButtonLocation:
FloatingActionButtonLocation.miniCenterTop,
)7.2 点击区域过小怎么办？
FloatingActionButton(
mini: false, // 确保非小型模式
shape: CircleBorder(),
materialTapTargetSize: MaterialTapTargetSize.padded,
)7.3 键盘弹出时遮挡 FAB？
Scaffold(
resizeToAvoidBottomInset: false, // 禁止调整布局
floatingActionButton: Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: FloatingActionButton(...),
),
)7.4 动态更新扩展型 FAB 内容？
ValueListenableBuilder<bool>(
valueListenable: _isUploading,
builder: (context, value, child) {
return FloatingActionButton.extended(
label: value ? Text("上传中...") : Text("开始上传"),
icon: value
? CircularProgressIndicator(color: Colors.white)
: Icon(Icons.cloud_upload),
);
},
)相关推荐
Flutter 按钮组件 TextButton 详解-CSDN博客文章浏览阅读1.8k次，点赞60次，收藏62次。TextButton 适用于不需要强调的按钮操作，如取消、返回或辅助功能。通过 style 属性可以自定义颜色、形状、背景等。掌握 TextButton 的使用，可以帮助开发者创建更加灵活和简洁的 UI 交互体验。https://shuaici.blog.csdn.net/article/details/146068020Flutter 按钮组件 ElevatedButton 详解-CSDN博客文章浏览阅读844次，点赞20次，收藏21次。本文详细描述 ElevatedButton 是 Flutter 中常见的按钮组件，适用于强调操作。通过 style 属性可以灵活地修改背景色、形状、大小等。掌握 ElevatedButton 的使用可以帮助开发者创建更美观的交互界面。
https://shuaici.blog.csdn.net/article/details/146067694