MaterialMenu

简介

MaterialMenu 是一个可定制的 Material Design 菜单图标组件，支持在不同图标状态（汉堡菜单、箭头、X、勾选）之间平滑过渡。

流畅动画：不同图标状态之间的平滑过渡动画
高度定制：可调整尺寸、颜色、线条宽度和动画时长
多种状态：支持汉堡菜单、箭头、X和勾选四种图标状态
布局适应：适配不同布局类型（Row、Column、Stack）
RTL支持:支持从右到左的布局
动画监听：可以设置动画监听器，监听动画状态
变换偏移:支持手动控制动画进度

下载安装

ohpm install @ohos/material-menu

OpenHarmony ohpm环境配置等更多内容，请参考如何安装OpenHarmony ohpm包。

使用说明

导入并使用

import { IconState, MaterialMenuView } from '@ohos/material-menu';

@Component
struct MyComponent {
  @State menuState: IconState = IconState.BURGER;

  build() {
    MaterialMenuView({
      menuSize: 48,
      color: Color.Black,
      strokeWidth: 3,
      iconState: this.menuState,
      onStateChange: (state) => this.menuState = state
    })
  }
}

接口说明

1. MaterialMenuView 组件

1.1 属性

属性名	类型	默认值	说明
menuSize	number	48	菜单大小
strokeWidth	number	3	线条宽度
color	ResourceColor	Color.Black	图标颜色
animationDuration	number	500	动画持续时间（毫秒）
iconState	IconState	IconState.BURGER	初始图标状态
rtlEnabled	boolean	false	是否启用从右到左布局
visible	boolean	true	组件是否可见
clickAnimationEnabled	boolean	true	是否启用点击动画
controller	MaterialMenuViewController	null	组件控制器，用于编程控制

1.2 事件回调

事件名	类型	说明
onMenuClick	`() => void`	菜单点击事件
onStateChange	`(state: IconState) => void`	状态变化事件
onDrawableReady	`(drawable: MaterialMenuDrawable) => void`	Drawable准备就绪事件

1.3 公开方法（通过Controller调用）

方法名	方法签名	参数说明	返回类型	备注
setDrawable	`setDrawable(drawable: MaterialMenuDrawable): void`	`drawable`: MaterialMenuDrawable实例	`void`	设置MaterialMenuDrawable实例
getIconState	`getIconState(): IconState`	无	`IconState`	获取当前图标状态
animateIconState	`animateIconState(state: IconState): void`	`state`: 目标图标状态	`void`	动画切换到指定图标状态
setAnimationListener	`setAnimationListener(listener: AnimationListener): void`	`listener`: 动画监听器	`void`	设置动画状态变化监听器
setInterpolator	`setInterpolator(interpolator: AnimatorResult \| null): void`	`interpolator`: 动画插值器	`void`	设置动画插值器
setTransformationOffset	`setTransformationOffset(state: AnimationState, value: number): IconState`	`state`: 动画状态，`value`: 偏移量(0-2)	`IconState`	手动设置动画变换偏移量
cancelAnimation	`cancelAnimation(): void`	无	`void`	取消当前动画

约束与限制

在下述版本环境验证通过：

DevEco Studio: 6.0.0 Release（6.0.0.868）, SDK: API12 (5.0.0.71)

目录结构

|---- ohos_material-menu
|     |---- entry          # 示例应用模块
|     |---- library        # MaterialMenu 组件库模块
|     |     |---- src
|     |     |     └─ main
|     |     |          └─ ets
|     |     |               ├─ components/
|     |     |               │    │---- MaterialMenuView.ets     # 主视图组件
|     |     |               │    └─── MaterialMenuDrawable.ets # 动画绘图逻辑
|     |     |               └─ enums/
|     |     |                    │---- AnimationState.ets  # 动画状态枚举
|     |     |                    │---- IconState.ets       # 图标状态枚举
|     |     |                    └─ Stroke.ets             # 线条宽度枚举
|     |     └─ Index.ets   # 对外接口
|     |---- README.md      # 安装使用方法
|     |---- README.zh.md   # 安装使用方法

贡献代码

使用过程中发现任何问题都可以提 Issue ，当然，也非常欢迎发 PR 共建。

开源协议

本项目基于 Apache License 2.0 ，请自由地享受和参与开源。