HarmonyOS 菜单的样式如何修改

现在使用Select菜单的样式如下,1、我如何将箭头替换,2、选中的圆角如何去除,3、下拉的内容如何居中?

HarmonyOS  菜单的样式如何修改  -鸿蒙开发者社区

HarmonyOS
2024-12-24 16:16:46
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

目前可以通过bindMenu实现效果。参考网址:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-menu-V5

如下有个简单的demo,可做参考:

interface NavItem {
  icon: Resource;
  menu: string;
}

@Entry
@Component
struct MenuExample {
  @State listData: NavItem[] = [{
    icon: $r('app.media.icon'),
    menu: 'Menu4'
  }, {
    icon: $r('app.media.avatar'),
    menu: 'Menu5'
  }
  ]
  @State currentImage: Resource = $r("app.media.icon")
  @State currentMenu: string = 'click for menu'

  @Builder
  MenuBuilder() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      ForEach(this.listData, (item: NavItem, index) => {
        Column() {
          Row() {
            Image(item.icon).width(20).height(20).margin({ right: 5 })
            Text(item.menu).fontSize(20)
          }
          .width('100%')
          .height(30)
          .justifyContent(FlexAlign.Center)
          .align(Alignment.Center)
          .onClick(() => {
            this.currentMenu = item.menu
            this.currentImage = item.icon
          })

          if (index != this.listData.length - 1) {
            Divider().height(10).width('80%').color('#ccc')
          }
        }.padding(5).height(40)
      })
    }.width(100)
  }

  build() {
    Column() {
      Row() {
        Image(this.currentImage).width(20).height(20).margin({ right: 5, top: 20 })
        Text(this.currentMenu)
          .fontSize(20)
          .margin({ top: 20 })
          .bindMenu(this.MenuBuilder)
      }

    }
    .height('100%')
    .width('100%')
    .backgroundColor('#f0f0f0')
  }
}
分享
微博
QQ
微信
回复
2024-12-24 18:47:58
相关问题
LoadingProgress如何修改加载动画样式
1957浏览 • 1回复 待解决
修改Button默认样式吗?
564浏览 • 1回复 待解决
修改分段按钮样式为圆角矩形
1121浏览 • 1回复 待解决
HarmonyOS 横向菜单怎么实现
14浏览 • 1回复 待解决
绑定菜单后无法使用右键触发菜单
1956浏览 • 1回复 待解决
HarmonyOS 如何修改app名字?
620浏览 • 1回复 待解决