鸿蒙App 浮动操作按钮（FAB）与抽屉菜单技术详解

一、引言​

二、技术背景​

1. 鸿蒙UI框架核心组件

2. 关键技术特性

• 位置自适应：FAB自动避开系统导航栏和安全区域
• 手势交互：支持边缘滑动打开菜单、点击外部关闭
• 状态记忆：记住用户最后选择的菜单项
• 主题融合：自动适配鸿蒙暗黑模式/色彩系统

三、应用场景​

四、核心原理与流程图​

1. FAB变形原理

graph TD
    A[初始状态] -->|点击| B[FAB变形为关闭图标]
    B -->|动画完成| C[展开抽屉菜单]
    C -->|点击外部/关闭按钮| D[收起菜单]
    D -->|动画完成| E[FAB恢复原始状态]

2. 抽屉菜单交互流程

graph TD
    A[用户操作] --> B{操作类型}
    B -->|点击FAB| C[展开菜单]
    B -->|边缘滑动| D[展开菜单]
    B -->|点击遮罩层| E[收起菜单]
    B -->|点击菜单项| F[执行对应操作]
    C --> G[显示遮罩层]
    D --> G
    E --> H[隐藏遮罩层]
    F --> H
    G --> I[菜单滑入动画]
    H --> J[菜单滑出动画]

五、核心特性​

1. 动态变形：FAB点击时平滑过渡为关闭图标
2. 手势支持：边缘滑动打开菜单，支持惯性滑动
3. 多级菜单：支持菜单项分组和二级子菜单
4. 位置记忆：记住用户最后选择的菜单项
5. 主题适配：自动遵循鸿蒙暗黑模式/字体设置

六、环境准备​

1. 开发环境

• DevEco Studio：3.1+（最新版）
• HarmonyOS SDK：API 9+（支持ArkUI声明式开发）
• 设备：真机/模拟器（Phone/Tablet/Foldable）

2. 项目配置

{
  "module": {
    "abilities": [
      {
        "skills": [
          {
            "entities": ["entity.system.navigation"],
            "actions": ["action.system.navigator"]
          }
        ]
      }
    ]
  }
}

七、详细代码实现​

场景1：基础FAB封装（FabComponent）​

1. 组件代码（FabComponent.ets）

// FAB组件
@Component
export struct FabComponent {
  @Link isExpanded: boolean  // 展开状态
  @Prop icon: Resource = $r('app.media.ic_add')  // 默认图标
  @Prop expandedIcon: Resource = $r('app.media.ic_close')  // 展开状态图标
  @Prop position: { x: number, y: number } = { x: 0, y: 0 }  // 位置偏移
  @Prop size: number = 56  // 直径(px)
  @Prop color: string = '#FF4081'  // 背景色

  private animator: AnimatorProperty = new AnimatorProperty()

  build() {
    Button() {
      Image(this.isExpanded ? this.expandedIcon : this.icon)
        .width(24)
        .height(24)
        .objectFit(ImageFit.Contain)
    }
    .width(this.size)
    .height(this.size)
    .borderRadius(this.size / 2)
    .backgroundColor(this.color)
    .shadow({ radius: 8, color: '#1A000000', offsetX: 0, offsetY: 4 })
    .position({ x: this.position.x, y: this.position.y })
    .onClick(() => {
      this.isExpanded = !this.isExpanded
      this.playTransformAnimation()
    })
    .onReady(() => {
      // 初始位置自适应
      const safeArea = display.getDefaultDisplaySync().safeArea
      this.position = {
        x: display.getDefaultDisplaySync().width - this.size - 20,
        y: safeArea.bottom - this.size - 20
      }
    })
  }

  // 播放变形动画
  private playTransformAnimation() {
    animateTo({
      duration: 300,
      curve: Curve.EaseOut,
      iterations: 1,
      playMode: PlayMode.Normal
    }, () => {
      // 实际项目中可添加缩放/旋转效果
    })
  }
}

场景2：抽屉菜单封装（DrawerMenu）​

1. 组件代码（DrawerMenu.ets）

// 菜单项模型
interface MenuItem {
  id: string;
  icon?: Resource;
  text: string;
  group?: string;
  subItems?: MenuItem[];
  action?: () => void;
}

@Component
export struct DrawerMenu {
  @Link isOpen: boolean  // 菜单打开状态
  @Prop menuItems: MenuItem[] = []  // 菜单数据
  @Prop headerView?: () => void  // 自定义头部视图
  @State activeGroup: string = ''  // 当前激活的分组

  build() {
    if (!this.isOpen) return
    
    // 遮罩层
    Stack() {
      // 菜单内容
      Column() {
        // 头部视图
        if (this.headerView) {
          this.headerView()
        } else {
          this.defaultHeader()
        }
        
        // 菜单项
        Scroll() {
          Column() {
            ForEach(this.groupedMenuItems, (group: {title: string, items: MenuItem[]}) => {
              this.buildMenuGroup(group.title, group.items)
            }, group => group.title)
          }
        }
        .flexGrow(1)
      }
      .width('80%')
      .height('100%')
      .backgroundColor('#FFFFFF')
      .translate({ x: this.isOpen ? '0%' : '-100%' })
      .animation({ duration: 300, curve: Curve.EaseOut })
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#80000000')  // 半透明遮罩
    .onClick(() => this.isOpen = false)  // 点击遮罩关闭
  }

  // 默认头部视图
  @Builder defaultHeader() {
    Column() {
      Image($r('app.media.ic_user'))
        .width(80)
        .height(80)
        .borderRadius(40)
        .margin({ top: 40 })
      Text('用户名')
        .fontSize(20)
        .margin({ top: 10 })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .padding(20)
  }

  // 构建菜单分组
  private get groupedMenuItems() {
    const groups: Record<string, MenuItem[]> = {}
    this.menuItems.forEach(item => {
      const group = item.group || 'default'
      if (!groups[group]) groups[group] = []
      groups[group].push(item)
    })
    return Object.keys(groups).map(title => ({
      title,
      items: groups[title]
    }))
  }

  // 构建单个菜单组
  @Builder buildMenuGroup(title: string, items: MenuItem[]) {
    if (title !== 'default') {
      Text(title)
        .fontSize(14)
        .fontColor('#999999')
        .margin({ top: 20, left: 20, bottom: 10 })
    }
    
    ForEach(items, item => {
      if (item.subItems) {
        this.buildSubMenu(item)
      } else {
        this.buildMenuItem(item)
      }
    }, item => item.id)
  }

  // 构建普通菜单项
  @Builder buildMenuItem(item: MenuItem) {
    Row() {
      if (item.icon) {
        Image(item.icon)
          .width(24)
          .height(24)
          .margin({ right: 16 })
      }
      Text(item.text)
        .fontSize(16)
    }
    .padding(16)
    .width('100%')
    .onClick(() => {
      item.action?.()
      this.isOpen = false
    })
  }

  // 构建带子菜单的项
  @Builder buildSubMenu(item: MenuItem) {
    Column() {
      // 父菜单项
      Row() {
        if (item.icon) {
          Image(item.icon)
            .width(24)
            .height(24)
            .margin({ right: 16 })
        }
        Text(item.text)
          .fontSize(16)
        Image($r('app.media.ic_arrow_right'))
          .width(16)
          .height(16)
          .margin({ left: 'auto' })
      }
      .padding(16)
      .width('100%')
      .onClick(() => this.activeGroup = this.activeGroup === item.id ? '' : item.id)
      
      // 子菜单项
      if (this.activeGroup === item.id) {
        Column() {
          ForEach(item.subItems!, subItem => this.buildMenuItem(subItem), subItem => subItem.id)
        }
        .padding({ left: 40 })
        .backgroundColor('#F5F5F5')
      }
    }
  }
}

场景3：FAB与抽屉菜单联动（FabDrawerDemo）​

1. 页面代码（FabDrawerDemo.ets）

import { FabComponent } from '../components/FabComponent'
import { DrawerMenu } from '../components/DrawerMenu'

@Entry
@Component
struct FabDrawerDemo {
  @State isMenuOpen: boolean = false
  @State fabPosition: { x: number, y: number } = { x: 0, y: 0 }

  // 菜单数据
  private menuItems: MenuItem[] = [
    { id: 'home', icon: $r('app.media.ic_home'), text: '首页', action: () => {} },
    { id: 'search', icon: $r('app.media.ic_search'), text: '搜索', action: () => {} },
    { 
      id: 'share', 
      icon: $r('app.media.ic_share'), 
      text: '分享', 
      group: 'social',
      subItems: [
        { id: 'wechat', icon: $r('app.media.ic_wechat'), text: '微信', action: () => {} },
        { id: 'weibo', icon: $r('app.media.ic_weibo'), text: '微博', action: () => {} },
        { id: 'email', icon: $r('app.media.ic_email'), text: '邮件', action: () => {} }
      ]
    },
    { id: 'settings', icon: $r('app.media.ic_settings'), text: '设置', action: () => {} }
  ]

  build() {
    Stack() {
      // 主内容区
      Column() {
        Text('主界面内容')
          .fontSize(24)
          .margin(20)
        // ...其他内容
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#F0F0F0')

      // FAB按钮
      FabComponent({
        isExpanded: $isMenuOpen,
        icon: $r('app.media.ic_add'),
        expandedIcon: $r('app.media.ic_close'),
        position: this.fabPosition,
        size: 64,
        color: '#FF4081'
      })

      // 抽屉菜单
      DrawerMenu({
        isOpen: $isMenuOpen,
        menuItems: this.menuItems,
        headerView: this.buildCustomHeader
      })
    }
    .width('100%')
    .height('100%')
    .onReady(() => {
      // 初始化FAB位置
      const display = display.getDefaultDisplaySync()
      const safeArea = display.safeArea
      this.fabPosition = {
        x: display.width - 84,
        y: safeArea.bottom - 84
      }
    })
  }

  // 自定义头部视图
  @Builder buildCustomHeader() {
    Column() {
      Image($r('app.media.profile'))
        .width(80)
        .height(80)
        .borderRadius(40)
        .margin({ top: 40 })
      Text('张三')
        .fontSize(20)
        .margin({ top: 10 })
      Text('高级会员')
        .fontSize(14)
        .fontColor('#FFD700')
        .margin({ top: 5 })
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .padding(20)
  }
}

八、运行结果与测试步骤​

1. 预期效果

• FAB交互：点击时平滑变形为关闭图标，再次点击恢复
• 菜单动画：菜单从右侧滑入，带半透明遮罩层
• 手势支持：从屏幕左边缘右滑打开菜单，点击外部关闭
• 多级菜单：点击带箭头项展开子菜单，带缩进效果

2. 测试步骤

1. 环境配置：
   • 安装DevEco Studio 3.1+，创建"Empty Ability"项目（语言选择TS）
   • 添加图标资源到resources/base/media/目录
2. 真机测试：
   • 连接华为手机/平板，开启USB调试
   • 运行项目，测试FAB变形与菜单交互
3. 边界测试：
   • 在折叠屏设备上测试布局适配
   • 快速连续点击FAB，验证状态稳定性

九、部署场景​

十、疑难解答​

十一、未来展望与技术趋势​

1. 趋势

• AI预测菜单：根据用户习惯预加载常用菜单项
• 3D变换效果：FAB变形为3D卡片飞入菜单
• 跨设备联动：手机FAB操作同步到手表/电视
• 情境感知菜单：根据时间/位置自动调整菜单内容

2. 挑战

• 多端一致性：手机/车机/手表等不同形态设备的交互适配
• 无障碍访问：为视障用户提供菜单语音导航
• 性能优化：复杂菜单的渲染性能保障（万级菜单项）

十二、总结​

1. FAB变形动画：通过AnimatorProperty实现平滑状态切换
2. 抽屉菜单结构：使用Stack+Column实现滑入滑出效果
3. 手势交互：边缘滑动检测+点击外部关闭
4. 最佳实践：
   • 使用@Link实现FAB与菜单的状态同步
   • 通过@Builder封装可复用的菜单模板
   • 使用display模块计算安全区域位置
5. 跨设备适配：
   • 直板手机：标准布局
   • 折叠屏：动态调整菜单宽度
   • 车机：强化语音交互支持

完整源码下载：

FabComponent.ets

DrawerMenu.ets

联动示例

图标资源包