#

案例概述

FloatingActionButton（FAB）是应用中最常见的操作按钮。它通常位于屏幕右下角，用于触发主要操作。本案例展示了如何创建各种高级 FAB，包括自定义样式、多个按钮、动画效果等。

核心概念

1. 基础 FAB

FloatingActionButton 是一个圆形按钮，通常用于主要操作。

2. 多个 FAB

可以通过 FloatingActionButtonLocation 和 Stack 创建多个 FAB。

3. 动画 FAB

可以添加动画效果到 FAB。

代码详解

示例 1：基础 FAB

class BasicFABExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('基础 FAB')),
      body: const Center(child: Text('内容')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
      ),
    );
  }
}

代码解释： 这是最基础的 FAB。通过 floatingActionButton 参数添加到 Scaffold。

示例 2：扩展 FAB

class ExtendedFABExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('扩展 FAB')),
      body: const Center(child: Text('内容')),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        icon: const Icon(Icons.add),
        label: const Text('添加'),
      ),
    );
  }
}

代码解释： 这个示例展示了扩展 FAB。包含图标和标签。

示例 3：多个 FAB

class MultipleFABExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('多个 FAB')),
      body: const Center(child: Text('内容')),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {},
            child: const Icon(Icons.edit),
          ),
          const SizedBox(height: 16),
          FloatingActionButton(
            onPressed: () {},
            child: const Icon(Icons.delete),
          ),
        ],
      ),
    );
  }
}

代码解释： 这个示例展示了多个 FAB。通过 Column 排列多个按钮。

示例 4：自定义 FAB

class CustomFABExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('自定义 FAB')),
      body: const Center(child: Text('内容')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: Colors.purple,
        shape: const CircleBorder(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

代码解释： 这个示例展示了自定义 FAB。可以改变颜色和形状。

示例 5：动画 FAB

class AnimatedFABExample extends StatefulWidget {
  @override
  State<AnimatedFABExample> createState() => _AnimatedFABExampleState();
}

class _AnimatedFABExampleState extends State<AnimatedFABExample>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool _isExpanded = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('动画 FAB')),
      body: const Center(child: Text('内容')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isExpanded = !_isExpanded;
          });
          if (_isExpanded) {
            _controller.forward();
          } else {
            _controller.reverse();
          }
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

代码解释： 这个示例展示了动画 FAB。通过 AnimationController 实现动画效果。

高级话题

1. 动态/响应式设计

根据屏幕大小调整 FAB。

2. 动画与过渡

自定义 FAB 动画。

3. 搜索/过滤/排序

FAB 可以触发搜索。

4. 选择与批量操作

支持批量操作。

5. 加载与缓存

显示加载状态。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义样式。

9. 数据持久化/导出

保存状态。

10. 单元测试与集成测试

测试功能。

PC 端适配要点

• 根据屏幕大小调整 FAB 位置
• 支持键盘快捷键
• 提供清晰的操作指示

实际应用场景

• 创建操作：创建新项目
• 编辑操作：编辑项目
• 删除操作：删除项目
• 快速操作：快速执行操作

扩展建议

• 学习高级 FAB 库
• 研究性能优化
• 探索自定义动画
• 集成快捷键库

总结

FAB 是触发主要操作的重要组件。通过灵活使用 FloatingActionButton，可以创建各种 FAB 效果。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net