您的位置:首页 > 软件教程 > 教程 > Menu组件在移动应用程序中的应用

Menu组件在移动应用程序中的应用

来源:好特整理 | 时间:2024-04-12 08:49:18 | 阅读:54 |  标签: 鸿蒙 K S AR ARM 应用   | 分享到:

🚀一、Menu组件 Menu组件是一种常见的用户界面(UI)控件,用于在移动应用程序中显示可选项列表。它通常由一系列链接或按钮组成,以帮助用户导航和选择所需的操作。Menu组件可以在水平或垂直方向上呈现,可以是下拉或弹出式的,并可以在需要时动态更新其内容。通常,Menu组件可以在导航

Menu组件是一种常见的用户界面(UI)控件,用于在移动应用程序中显示可选项列表。它通常由一系列链接或按钮组成,以帮助用户导航和选择所需的操作。Menu组件可以在水平或垂直方向上呈现,可以是下拉或弹出式的,并可以在需要时动态更新其内容。通常,Menu组件可以在导航栏、侧边栏或上下文菜单中找到。一些Menu组件还支持图标和快捷键,以增强用户交互性和可用性。

创建默认样式的菜单

默认样式的菜单指的是操作系统默认提供的菜单样式,在不经过样式定义的情况下,菜单的外观和行为取决于操作系统。例如,大多数操作系统提供了一个默认的下拉菜单样式,其中包含一个向下箭头和一个下拉列表,当用户单击时,列表会向下滑动。而操作系统的菜单通常包括一个固定的样式。

@Entry
@Component
struct Index {
  build() {
    Row() {
      Button('click for Menu')
        .bindMenu([
          {
            value: 'Menu1',
            action: () => {
              console.info('handle Menu1 select')
            }
          }
        ])
    }
    .margin(20)
    .height('100%')
  }
}

Menu组件在移动应用程序中的应用

创建自定义样式的菜单

虽然默认样式的菜单可以提供一些基本的菜单操作,但通常它们无法满足大多数应用程序或网站的需求,因此需要自定义样式的菜单。

@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: 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)
    }
  }
}

Menu组件在移动应用程序中的应用

本人测试子菜单在模拟器和预览都出不来

写在最后

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注小编,同时可以期待后续文章ing?,不定期分享原创知识。
  • 更多鸿蒙最新技术知识点,请关注作者博客: https://t.doruo.cn/14DjR1rEY

Menu组件在移动应用程序中的应用

小编推荐阅读

好特网发布此文仅为传递信息,不代表好特网认同期限观点或证实其描述。

K
K
类型:角色扮演  运营状态:封测  语言:中文   

游戏攻略

游戏礼包

游戏视频

游戏下载

游戏活动

《K》是由乐次元开发的一款日系动漫RPG游戏,游戏根据同名动漫改编而来,高水准的漫画和音乐是这款游戏的

相关视频攻略

更多

扫二维码进入好特网手机版本!

扫二维码进入好特网微信公众号!

本站所有软件,都由网友上传,如有侵犯你的版权,请发邮件admin@haote.com

湘ICP备2022002427号-10 湘公网安备:43070202000427号© 2013~2024 haote.com 好特网