下拉選擇菜單

2024-01-22 17:26 更新

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

說明

該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨標(biāo)記該內(nèi)容的起始版本。

子組件

無

接口

Select(options: Array<SelectOption>)

SelectOption對象說明

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

value

ResourceStr

是

下拉選項內(nèi)容。

icon

ResourceStr

否

下拉選項圖片。

屬性

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

名稱

參數(shù)類型

描述

selected

number

設(shè)置下拉菜單初始選項的索引，第一項的索引為0。

當(dāng)不設(shè)置selected屬性時，默認(rèn)選擇值為-1，菜單項不選中。

value

string

設(shè)置下拉按鈕本身的文本內(nèi)容。 當(dāng)菜單選中時默認(rèn)會替換為菜單項文本內(nèi)容。

font

Font

設(shè)置下拉按鈕本身的文本樣式。

默認(rèn)值：

{

size: '16fp',

weight: FontWeight.Medium

}

fontColor

ResourceColor

設(shè)置下拉按鈕本身的文本顏色。

默認(rèn)值：'#E6FFFFFF'

selectedOptionBgColor

ResourceColor

設(shè)置下拉菜單選中項的背景色。

默認(rèn)值：'#33007DFF'

selectedOptionFont

Font

設(shè)置下拉菜單選中項的文本樣式。

默認(rèn)值：

{

size: '16fp',

weight: FontWeight.Regular

}

selectedOptionFontColor

ResourceColor

設(shè)置下拉菜單選中項的文本顏色。

默認(rèn)值：'#ff007dff'

optionBgColor

ResourceColor

設(shè)置下拉菜單項的背景色。

默認(rèn)值：'#ffffffff'

optionFont

Font

設(shè)置下拉菜單項的文本樣式。

默認(rèn)值：

{

size: '16fp',

weight: FontWeight.Regular

}

optionFontColor

ResourceColor

設(shè)置下拉菜單項的文本顏色。

默認(rèn)值：'#ff182431'

事件

名稱

功能描述

onSelect(callback: (index: number, value?: string) => void)

下拉菜單選中某一項的回調(diào)。

index：選中項的索引。

value：選中項的值。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct SelectExample {
  5.   build() {
  6.     Column() {
  7.       Select([{ value: 'aaa', icon: "/common/public_icon.svg" },
  8.         { value: 'bbb', icon: "/common/public_icon.svg" },
  9.         { value: 'ccc', icon: "/common/public_icon.svg" },
  10.         { value: 'ddd', icon: "/common/public_icon.svg" }])
  11.         .selected(2)
  12.         .value('TTTTT')
  13.         .font({ size: 16, weight: 500 })
  14.         .fontColor('#182431')
  15.         .selectedOptionFont({ size: 16, weight: 400 })
  16.         .optionFont({ size: 16, weight: 400 })
  17.         .onSelect((index: number) => {
  18.           console.info('Select:' + index)
  19.         })
  20.     }.width('100%')
  21.   }
  22. }

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號