-
-
鸿蒙HarmonyOS实战-ArkUI组件(Menu)
-
发表于: 2024-5-7 21:16 3347
-
????一、Menu组件
Menu组件是一种常见的用户界面(UI)控件,用于在移动应用程序中显示可选项列表。它通常由一系列链接或按钮组成,以帮助用户导航和选择所需的操作。Menu组件可以在水平或垂直方向上呈现,可以是下拉或弹出式的,并可以在需要时动态更新其内容。通常,Menu组件可以在导航栏、侧边栏或上下文菜单中找到。一些Menu组件还支持图标和快捷键,以增强用户交互性和可用性。
1.创建默认样式的菜单
默认样式的菜单指的是操作系统默认提供的菜单样式,在不经过样式定义的情况下,菜单的外观和行为取决于操作系统。例如,大多数操作系统提供了一个默认的下拉菜单样式,其中包含一个向下箭头和一个下拉列表,当用户单击时,列表会向下滑动。而操作系统的菜单通常包括一个固定的样式。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | @Entry @Component struct Index { build() { Row() { Button( 'click for Menu' ) .bindMenu([ { value: 'Menu1' , action: () = > { console.info( 'handle Menu1 select' ) } } ]) } .margin( 20 ) .height( '100%' ) } } |
2.创建自定义样式的菜单
虽然默认样式的菜单可以提供一些基本的菜单操作,但通常它们无法满足大多数应用程序或网站的需求,因此需要自定义样式的菜单。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | @Entry @Component struct Index { @State select: boolean = true private iconStr: ResourceStr = $r( "app.media.app_icon" ) private iconStr2: ResourceStr = $r( "app.media.app_icon" ) @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.app_icon" ), / / 当builder参数进行配置时,表示与menuItem项绑定了子菜单。鼠标hover在该菜单项时,会显示子菜单。 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.app_icon" ), content: "菜单选项" , endIcon: $r( "app.media.app_icon" ), builder: this.SubMenu.bind(this) }) } MenuItem({ startIcon: this.iconStr2, content: "菜单选项" , endIcon: $r( "app.media.app_icon" ) }) } } build() { Row() { Button( 'click for Menu' ) .bindMenu(this.MyMenu) / / .bindContextMenu(this.MyMenu, ResponseType.RightClick) 设置菜单打开行为 } } } |
本人测试子菜单在模拟器和预览都出不来
????写在最后
- 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
- 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
- 关注小编,同时可以期待后续文章ing????,不定期分享原创知识。
- 更多鸿蒙最新技术知识点,请关注作者博客:https://t.doruo.cn/14DjR1rEY
[招生]科锐逆向工程师培训(2024年11月15日实地,远程教学同时开班, 第51期)
赞赏
他的文章
看原图
赞赏
雪币:
留言: