鴻蒙ArkTS聲明式組件：Select

Select

提供下拉選擇菜單，可以讓用戶在多個(gè)選項(xiàng)之間選擇。

說(shuō)明：
開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

子組件

無(wú)

接口

Select(options: Array<[SelectOption]>)

SelectOption對(duì)象說(shuō)明

參數(shù)名	參數(shù)類型	必填	參數(shù)描述
value	[ResourceStr]	是	下拉選項(xiàng)內(nèi)容。
icon	[ResourceStr]	否	下拉選項(xiàng)圖片。

屬性

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

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

ArrowPosition10+枚舉說(shuō)明

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

MenuAlignType10+枚舉說(shuō)明

名稱	描述
START	按照語(yǔ)言方向起始端對(duì)齊。
CENTER	居中對(duì)齊。
END	按照語(yǔ)言方向末端對(duì)齊。

事件

名稱	功能描述
onSelect(callback: (index: number, value?: string) => void)	下拉菜單選中某一項(xiàng)的回調(diào)。 index：選中項(xiàng)的索引。 value：選中項(xiàng)的值。`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%')
  }
}

審核編輯黃宇

聲明：本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人，不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用，如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題，請(qǐng)聯(lián)系本站處理。舉報(bào)投訴