Select

提供下拉選擇菜單，可以讓用戶在多個選項之間選擇。

說明：
開發前請熟悉鴻蒙開發指導文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

子組件

無

接口

Select(options: Array<[SelectOption]>)

SelectOption對象說明

參數名	參數類型	必填	參數描述
value	[ResourceStr]	是	下拉選項內容。
icon	[ResourceStr]	否	下拉選項圖片。

屬性

除支持[通用屬性]外，還支持以下屬性：

名稱	參數類型	描述
selected	number	[Resource]11+
value	string	[Resource]11+
font	[Font]	設置下拉按鈕本身的文本樣式。默認值： { size: '16fp', weight: FontWeight.Medium }
fontColor	[ResourceColor]	設置下拉按鈕本身的文本顏色。默認值：'#E5182431'
selectedOptionBgColor	[ResourceColor]	設置下拉菜單選中項的背景色。默認值：'#33007DFF'
selectedOptionFont	[Font]	設置下拉菜單選中項的文本樣式。默認值： { size: '16fp', weight: FontWeight.Regular }
selectedOptionFontColor	[ResourceColor]	設置下拉菜單選中項的文本顏色。默認值：'#ff007dff'
optionBgColor	[ResourceColor]	設置下拉菜單項的背景色。默認值：'#ffffffff'
optionFont	[Font]	設置下拉菜單項的文本樣式。默認值： { size: '16fp', weight: FontWeight.Regular }
optionFontColor	[ResourceColor]	設置下拉菜單項的文本顏色。默認值：'#ff182431'
space10+	[Length]	設置下拉菜單項的文本與箭頭之間的間距。說明：不支持設置百分比。
arrowPosition10+	[ArrowPosition]	設置下拉菜單項的文本與箭頭之間的對齊方式。默認值：ArrowPosition.END
menuAlign10+	alignType: [MenuAlignType], offset?: [Offset]	設置下拉按鈕與下拉菜單間的對齊方式。 -alignType: 對齊方式類型，必填。默認值：MenuAlignType.START -offset: 按照對齊類型對齊后，下拉菜單相對下拉按鈕的偏移量。默認值：{dx: 0, dy: 0}

ArrowPosition10+枚舉說明

名稱	描述
END10+	文字在前，箭頭在后。
START10+	箭頭在前，文字在后。

MenuAlignType10+枚舉說明

名稱	描述
START	按照語言方向起始端對齊。
CENTER	居中對齊。
END	按照語言方向末端對齊。

事件

名稱	功能描述
onSelect(callback: (index: number, value?: string) => void)	下拉菜單選中某一項的回調。 index：選中項的索引。 value：選中項的值。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

搜狗高速瀏覽器截圖20240326151547.png

示例

// xxx.ets
@Entry
@Component
struct SelectExample {
  @State text: string = "TTTTT"
  @State index: number = 2
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END
  build() {
    Column() {
      Select([{ value: 'aaa', icon: "/common/public_icon.svg" },
        { value: 'bbb', icon: "/common/public_icon.svg" },
        { value: 'ccc', icon: "/common/public_icon.svg" },
        { value: 'ddd', icon: "/common/public_icon.svg" }])
        .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})
        .onSelect((index:number, text?: string | undefined)= >{
          console.info('Select:' + index)
          this.index = index;
          if(text){
            this.text = text;
          }
        })
    }.width('100%')
  }
}