HarmonyOS NEXT练习：Select下拉菜单

Select提供下拉选择菜单，可以让用户在多个选项之间选择。

接口

Select(options: Array<SelectOption>)

options：设置下拉选项。

SelectOption对象属性：

• value：下拉选项内容。
• icon：下拉选项图片。
• symbolIcon：下拉选项Symbol图片。symbolIcon优先级高于icon。

组件属性

.selected(value: number | Resource) //设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。
.value(value: ResourceStr) //设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。
.controlSize(value: ControlSize) //设置Select组件的尺寸。
.menuItemContentModifier(modifier: ContentModifier<MenuItemConfiguration>) //定制Select下拉菜单项内容区的方法。
.divider(options: Optional<DividerOptions> | null) //设置分割线样式，不设置该属性则按“默认值”展示分割线。
.font(value: Font) //设置下拉按钮本身的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。
.fontColor(value: ResourceColor) //设置下拉按钮本身的文本颜色。
.selectedOptionBgColor(value: ResourceColor) //设置下拉菜单选中项的背景色。
.selectedOptionFont(value: Font) //设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。
.selectedOptionFontColor(value: ResourceColor) //设置下拉菜单选中项的文本颜色。
.space(value: Length) //设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，或者小于等于8的值，取默认值。

组件事件

.onSelect(callback: (index: number, value: string) => void) //下拉菜单选中某一项的回调。

练习Demo：SelectPage

@Entry
@Component
struct SelectPage {
  @State text: string = "下拉菜单"
  @State index: number = -1
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END

  build() {
    Column({ space: 10 }) {
      Text('下拉菜单练习')
      Select([{ value: '菜单1' },
        { value: '菜单2' },
        { value: '菜单3' },
        { value: '菜单4' }])
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .space(this.space)
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, { dx: 0, dy: 0 })
        .optionWidth(200)
        .optionHeight(300)
        .onSelect((index: number, text?: string | undefined) => {
          console.info('Select:' + index)
          this.index = index;
          if (text) {
            this.text = text;
          }
        })
    }.width('100%')
  }
}