Flutter-FloatingActionButton-从核心用法到高级定制

2025-03-16 约 1133 字预计阅读 3 分钟

https://bing.ee123.net/img/rand?artid=146068462

Flutter FloatingActionButton 从核心用法到高级定制

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),
    );
  },
)

目录