Select 自定义版本

效果

参数

value

传递过来的值

icon

传递过来的图标

属性

menuItemContentModifier (最重要)

自定义核心属性

事件

onSelect

选择事件

示例

// 必须要有的 (一个字都不用改)
class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
  modifierText: string = ""


  constructor(text: string) {
    this.modifierText = text;
  }


  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
    return wrapBuilder(MenuItemBuilder)
  }
}

// 这就是你自定义下拉框的内容
// configuration.value 就是传递过来的value
// configuration.selected 就是是否被选中 true就是被选中,false 就是没有
// configuration.index 就是当前的下标
// configuration.triggerSelect 就是触发事件
@Builder
function MenuItemBuilder(configuration: MenuItemConfiguration) {
  Row() {
    Text(configuration.value).fontSize(20).margin({left:20})
    Blank().layoutWeight(1)
    Image($r("app.media.startIcon")).width(30).height(30).margin({
      right:20,
    })
  }
  .margin({
    top:10,
    bottom:10
  })
  .height(60)
  .backgroundColor(configuration.selected?Color.Red:Color.Blue)
  .onClick(() => {
    configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
  })
}

// 页面开始
@Entry
@Component
struct Index12 {
  @State text: string = "请输入"
  build() {
    Column({space:20}) {
      Row() {
        Select([
          { value: 'item1', icon: $r('app.media.startIcon') },
          { value: 'item2', icon: $r('app.media.startIcon') }
        ])
          .value(this.text)
          .onSelect((index: number, text: string) => {
            console.info('Select index:' + index)
            console.info('Select text:' + text)
            this.text = text
          })
          .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier"))
      }.alignItems(VerticalAlign.Center).height('50%')

      Row(){
        Text(this.text).fontSize(24).fontColor(Color.Red)
      }
    }
  }
}