HarmonyOS 菜单的样式如何修改？

Question

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

Answer 1

目前可以通过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')
  }
}