鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之Menu组件
一、操作环境
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+
二、Menu组件
以垂直列表形式显示的菜单。
子组件
包含MenuItem、MenuItemGroup子组件。
接口
Menu()
作为菜单的固定容器,无参数。
属性
除支持通用属性外,还支持以下属性:
名称 |
参数类型 |
描述 |
fontSize |
统一设置Menu中所有文本的尺寸,Length为number类型时,使用fp单位。 |
三、示例
代码
@Entry @Component struct Index { @State select: boolean = true private iconStr: ResourceStr = $r("app.media.view_list_filled") private iconStr2: ResourceStr = $r("app.media.view_list_filled") @Builder SubMenu() { Menu() { MenuItem({ content: "复制", labelInfo: "Ctrl+C" }) MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" }) } } @Builder MyMenu(){ Menu() { MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) .enabled(false) MenuItem({ startIcon: this.iconStr, content: "菜单选项", endIcon: $r("app.media.arrow_right_filled"), builder: this.SubMenu.bind(this) }) MenuItemGroup({ header: '小标题' }) { MenuItem({ content: "菜单选项" }) .selectIcon(true) .selected(this.select) .onChange((selected) => { console.info("menuItem select" + selected); this.iconStr2 = $r("app.media.icon"); }) MenuItem({ startIcon: $r("app.media.view_list_filled"), content: "菜单选项", endIcon: $r("app.media.arrow_right_filled"), builder: this.SubMenu.bind(this) }) } MenuItem({ startIcon: this.iconStr2, content: "菜单选项", endIcon: $r("app.media.arrow_right_filled") }) } } build() { Row() { Column() { Text('click to show menu') .fontSize(50) .fontWeight(FontWeight.Bold) } .bindMenu(this.MyMenu) .width('100%') } .height('100%') } }
图例
编辑
你有时间常去我家看看我在这里谢谢你啦...
我家地址:亚丁号
最后送大家一首诗:
山高路远坑深,
大军纵横驰奔,
谁敢横刀立马?
惟有点赞加关注大军。