Select

效果图

子组件

无

参数

value

下拉选项内容

icon

下拉选项图片

属性

selected (重要)

传递 index,number 类型从 0 开始

value (重要)

设置下拉按钮的文本内容。选中菜单项后，按钮文本将自动更新为选中的菜单项文本。

string 类型

menuAlign (重要)

• 设置下拉按钮与下拉菜单之间的对其方式 第一个表示居中位置 第二个表示偏移量

.menuAlign(
    MenuAlignType.CENTER,
    {dx:100,dy:100}
)

optionWidth(重要)

• 设置下拉菜单的宽度

optionHeight(重要)

• 下拉菜单的默认最大高度是屏幕可用高度的 80%

divider (分割线)

• strokeWidth 分割线宽度

• color 颜色

font 针对的是 value

• weight: 是否加粗

fontColor

• Color.Red 字体颜色

selectedOptionBgColor

• 设置选中的背景色 Color.Red

selectedOptionFont

• 设置选中字体是否加粗

selectedOptionFont({
  weight:FontWeight.Bold
})

selectedOptionFontColor

• 设置选中字体颜色 Color.Yellow

optionBgColor

• 设置选项背景色 Color.Yellow

optionFontColor

• 设置字体颜色 Color.Red

space

• 下拉菜单选项的文本和箭头之间的间距

arrowPosition

• 下拉菜单项的文本和箭头之间的对其方式 ArrowPosition.START 是左边对齐 ArrowPosition.END 是右边对齐

.arrowPosition(ArrowPosition.END)

menuBackgroundColor

• 设置下拉菜单的背景色

menuBackgroundColor(Color.Orange)

事件

onSelect 事件(重要)

 .onSelect((index:number,text?:string|undefined)=>{
    console.info(index.toString())
    console.info(text)
})

示例

基础

class IListItem{
  value:string = "";
  icon:Resource = $r("app.media.startIcon")
}

@Entry
@Component
struct Index11 {
    @State index:number = 2
    @State text:string = "请选择"
    @State list:IListItem[] = [
      {
        value:'aaa',
        icon:$r("app.media.foreground")
      },
      {
        value:'bbb',
        icon:$r("app.media.startIcon")
      },
      {
        value:'ccc',
        icon:$r("app.media.app_icon")
      }
    ]
    build() {
        Column(){
          Row(){
            Select(this.list)
              .selected(this.index)
              .value(this.text)
              .onSelect((index:number,text?:string|undefined)=>{
                console.info(index.toString())
                console.info(text)
              })
          }
        }
    }
}

属性全

import { Font } from '@ohos.arkui.UIContext';

class IListItem{
  value:string = "";
  icon:Resource = $r("app.media.startIcon")
}

@Entry
@Component
struct Index11 {
    @State index:number = 2
    @State text:string = "请选择"
    @State list:IListItem[] = [
      {
        value:'aaa',
        icon:$r("app.media.foreground")
      },
      {
        value:'bbb',
        icon:$r("app.media.startIcon")
      },
      {
        value:'ccc',
        icon:$r("app.media.app_icon")
      },
      {
        value:'ddd',
        icon:$r("app.media.app_icon")
      },
      {
        value:'eee',
        icon:$r("app.media.app_icon")
      },
      {
        value:'fff',
        icon:$r("app.media.app_icon")
      },
      {
        value:'ggg',
        icon:$r("app.media.app_icon")
      }
    ]
    build() {
        Column(){
          Row(){
            Select(this.list)
              .selected(this.index)
              .value(this.text)
              .divider({
                strokeWidth: 1 ,
                color: 'red'
              })
              // 加粗
              .font({
                weight:FontWeight.Bold
              })
              // 字体颜色
              .fontColor(Color.Blue)
              // 设置下拉菜单中选中项的背景颜色
              .selectedOptionBgColor(Color.Red)
              // 设置选中项字体,是否加粗
              .selectedOptionFont({
                weight:FontWeight.Bold
              })
              // 设置选中字体颜色
              .selectedOptionFontColor(Color.Yellow)
              // 默认选项
              .optionBgColor(Color.Brown)
              // 默认字体
              .optionFont({weight:FontWeight.Regular})
              // 默认字体颜色
              .optionFontColor(Color.Green)
              // 下拉菜单选项的文本和箭头之间的间距
              // 要是设置menuAlign 则不管用
              .space(5)
              // 下拉菜单项的文本和箭头之间的对其方式
              // ArrowPosition.START 是左边对齐
              // ArrowPosition.END 是右边对齐
              .arrowPosition(ArrowPosition.END)
              // 设置下拉按钮与下拉菜单之间的对其方式
              // 第一个表示居中位置
              // 第二个表示偏移量
              .menuAlign(
                 MenuAlignType.CENTER,
                {dx:100,dy:100}
              )
              // 设置下拉菜单的宽度
              .optionWidth(220)
              // 设置下拉菜单的高度
              // 下拉菜单的默认最大高度是屏幕可用高度的80%
              .optionHeight(400)
              // 设置下拉菜单的背景色
              .menuBackgroundColor(Color.Orange)
              .onSelect((index:number,text?:string|undefined)=>{
                console.info(index.toString())
                console.info(text)
              })
          }
        }
    }
}