华为仓颉鸿蒙next原生UI基础组件Select

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

子组件

无

构造函数

init(Array<SelectOption>)

public init(values: Array<SelectOption>)

构造一个Select组件。
参数名 参数类型 必填 默认值 描述
values Array<SelectOption> 是 - 设置下拉选项。

函数

selected(Int32)

public func selected(value: Int32): This

设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。
参数名 参数类型 必填 默认值 描述
value Int32 是 - 下拉菜单初始选项的索引。

setValue(String)

public func setValue(value: String): This

根据指定的字符串，设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。
参数名 参数类型 必填 默认值 描述
value String 是 - 下拉按钮本身的文本内容。

setValue(CJResource)

public func setValue(value: CJResource): This

根据指定的资源文件，设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉按钮本身的文本内容。

font(FontStyle, FontWeight, Length, String)

public func font( style!: FontStyle = FontStyle.Normal, weight!: FontWeight = FontWeight.Medium, size!: Length = 16.vp, family!: String = "sans-serif" ): This

设置下拉按钮本身的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。
参数名 参数类型 必填 默认值 描述
style FontStyle 否 FontStyle.Normal 用于指定字体样式。
weight FontWeight 否 FontWeight.Medium 用于指定字体的粗细。
size Length 否 16.vp 指定字号和行高。
family String 否 "sans-serif" 指定字体系列。

fontColor(Color)

public func fontColor(value: Color): This

根据指定的Color，设置下拉按钮本身的文本颜色。
参数名 参数类型 必填 默认值 描述
value Color 是 - 下拉按钮本身的文本颜色。

fontColor(UInt32)

public func fontColor(value: UInt32): This

根据指定的色值，设置下拉按钮本身的文本颜色。
参数名 参数类型 必填 默认值 描述
value UInt32 是 0xE5182431 下拉按钮本身的文本颜色。

fontColor(CJResource)

public func fontColor(value: CJResource): This

根据指定的资源文件，设置下拉按钮本身的文本颜色。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉按钮本身的文本颜色。

selectedOptionBgColor(Color)

public func selectedOptionBgColor(value: Color): This

根据指定的Color，设置下拉菜单选中项的背景色。
参数名 参数类型 必填 默认值 描述
value Color 是 - 下拉菜单选中项的背景色。

selectedOptionBgColor(UInt32)

public func selectedOptionBgColor(value: UInt32): This

根据指定的色值，设置下拉菜单选中项的背景色。
参数名 参数类型 必填 默认值 描述
value UInt32 是 0x33007DFF 下拉菜单选中项的背景色。

selectedOptionBgColor(CJResource)

public func selectedOptionBgColor(value: CJResource): This

根据指定的资源文件，设置下拉菜单选中项的背景色。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉菜单选中项的背景色。

selectedOptionFont(FontStyle, FontWeight, Length, String)

public func selectedOptionFont( style!: FontStyle = FontStyle.Normal, weight!: FontWeight = FontWeight.Medium, size!: Length = 16.vp, family!: String = "sans-serif" ): This

设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。
参数名 参数类型 必填 默认值 描述
style FontStyle 否 FontStyle.Normal 用于指定字体样式。
weight FontWeight 否 FontWeight.Medium 用于指定字体的粗细。
size Length 否 16.vp 指定字号和行高。
family String 否 "sans-serif" 指定字体系列。

selectedOptionFontColor(Color)

public func selectedOptionFontColor(value: Color): This

根据指定的Color，设置下拉菜单选中项的文本颜色。
参数名 参数类型 必填 默认值 描述
value Color 是 - 下拉菜单选中项的文本颜色。

selectedOptionFontColor(UInt32)

public func selectedOptionFontColor(value: UInt32): This

根据指定的色值，设置下拉菜单选中项的文本颜色。
参数名 参数类型 必填 默认值 描述
value UInt32 是 0xff007dff 下拉菜单选中项的文本颜色。

selectedOptionFontColor(CJResource)

public func selectedOptionFontColor(value: CJResource): This

根据指定的资源文件，设置下拉菜单选中项的文本颜色。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉菜单选中项的文本颜色。

optionBgColor(Color)

public func optionBgColor(value: Color): This

根据指定的Color，设置下拉菜单项的背景色。
参数名 参数类型 必填 默认值 描述
value Color 是 - 下拉菜单项的背景色。

optionBgColor(UInt32)

public func optionBgColor(value: UInt32): This

根据指定的色值，设置下拉菜单项的背景色。
参数名 参数类型 必填 默认值 描述
value UInt32 是 0xffffffff 下拉菜单项的背景色。

optionBgColor(CJResource)

public func optionBgColor(value: CJResource): This

根据指定的资源文件，设置下拉菜单项的背景色。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉菜单项的背景色。

optionFont(FontStyle, FontWeight, Length, String)

public func optionFont( style!: FontStyle = FontStyle.Normal, weight!: FontWeight = FontWeight.Medium, size!: Length = 16.vp, family!: String = "sans-serif" ): This

设置下拉菜单项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。
参数名 参数类型 必填 默认值 描述
style FontStyle 否 FontStyle.Normal 用于指定字体样式。
weight FontWeight 否 FontWeight.Medium 用于指定字体的粗细。
size Length 否 16.vp 指定字号和行高。
family String 否 "sans-serif" 指定字体系列。

optionFontColor(Color)

public func optionFontColor(value: Color): This

根据指定的Color，设置下拉菜单项的文本颜色。
参数名 参数类型 必填 默认值 描述
value Color 是 - 下拉菜单项的文本颜色。

optionFontColor(UInt32)

public func optionFontColor(value: UInt32): This

根据指定的色值，设置下拉菜单项的文本颜色。
参数名 参数类型 必填 默认值 描述
value UInt32 是 0xff182431 下拉菜单项的文本颜色。

optionFontColor(CJResource)

public func optionFontColor(value: CJResource): This

根据指定的资源文件，设置下拉菜单项的文本颜色。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉菜单项的文本颜色。

space(Length)

public func space(value: Length): This

根据指定的Length类型值，设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为小于等于8的值，取默认值。
参数名 参数类型 必填 默认值 描述
value Length 是 8 下拉菜单项的文本与箭头之间的间距。

space(CJResource)

public func space(value: CJResource): This

根据指定的资源文件，设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为小于等于8的值，取默认值。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉菜单项的文本与箭头之间的间距。

space(Float64)

public func space(value: Float64): This

根据指定的Float64类型值，设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为小于等于8的值，取默认值。
参数名 参数类型 必填 默认值 描述
value Float64 是 8 下拉菜单项的文本与箭头之间的间距。

space(Int64)

public func space(value: Int64): This

根据指定的Int64类型值，设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为小于等于8的值，取默认值。
参数名 参数类型 必填 默认值 描述
value Int64 是 8 下拉菜单项的文本与箭头之间的间距。

arrowPosition(ArrowPosition)

public func arrowPosition(value: ArrowPosition): This

设置下拉菜单项的文本与箭头之间的对齐方式。
参数名 参数类型 必填 默认值 描述
value ArrowPosition 是 ArrowPosition.END 下拉菜单项的文本与箭头之间的对齐方式。

menuAlign(MenuAlignType, MenuOffset)

public func menuAlign(alignType: MenuAlignType, offset!: MenuOffset): This

设置下拉按钮与下拉菜单间的对齐方式。
参数名 参数类型 必填 默认值 描述
alignType MenuAlignType 是 MenuAlignType.START 对齐方式类型。
offset MenuOffset 否 dx: 0, dy: 0 按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。

optionWidth(OptionWidthMode)

public func optionWidth(value: OptionWidthMode ): This

设置下拉菜单项的宽度，不支持设置百分比。OptionWidthMode类型为枚举类型，OptionWidthMode决定下拉菜单是否继承下拉按钮宽度。

当设置为负数时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。

当菜单项设置宽度小于最小宽度56vp时，菜单宽度回弹至2栅格。正常值范围大于等于0。
参数名 参数类型 必填 默认值 描述
value OptionWidthMode 是 - 下拉菜单项的宽度。

optionWidth(Length)

public func optionWidth(value: Length): This

根据指定的Length类型值，设置下拉菜单项的宽度，不支持设置百分比。

当设置为负数时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。

当菜单项设置宽度小于最小宽度56vp时，菜单宽度回弹至2栅格。正常值范围大于等于0。
参数名 参数类型 必填 默认值 描述
value Length 是 - 下拉菜单项的宽度。

optionWidth(Float64)

public func optionWidth(value: Float64): This

根据指定的Float64类型值，设置下拉菜单项的宽度，不支持设置百分比。

当设置为负数时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。

当菜单项设置宽度小于最小宽度56vp时，菜单宽度回弹至2栅格。正常值范围大于等于0。
参数名 参数类型 必填 默认值 描述
value Float64 是 - 下拉菜单项的宽度。

optionWidth(Int64)

public func optionWidth(value: Int64): This

根据指定的Int64类型值，设置下拉菜单项的宽度，不支持设置百分比。

当设置为负数时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。

当菜单项设置宽度小于最小宽度56vp时，菜单宽度回弹至2栅格。正常值范围大于等于0。
参数名 参数类型 必填 默认值 描述
value Int64 是 - 下拉菜单项的宽度。

optionWidth(CJResource)

public func optionWidth(value: CJResource): This

根据指定的资源文件，设置下拉菜单项的宽度，不支持设置百分比。

当设置为负数时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。

当菜单项设置宽度小于最小宽度56vp时，菜单宽度回弹至2栅格。正常值范围大于等于0。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉菜单项的宽度。

optionHeight(Length)

public func optionHeight(value: Length): This

根据指定的Length类型值，设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。

当设置为负数与零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。

正常值范围大于0。如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。
参数名 参数类型 必填 默认值 描述
value Length 是 - 下拉菜单显示的最大高度。

optionHeight(Float64)

public func optionHeight(value: Float64): This

根据指定的Float64类型值，设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。

当设置为负数与零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。

正常值范围大于0。如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。
参数名 参数类型 必填 默认值 描述
value Float64 是 - 下拉菜单显示的最大高度。

optionHeight(Int64)

public func optionHeight(value: Int64): This

根据指定的Int64类型值，设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。

当设置为负数与零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。

正常值范围大于0。如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。
参数名 参数类型 必填 默认值 描述
value Int64 是 - 下拉菜单显示的最大高度。

optionHeight(CJResource)

public func optionHeight(value: CJResource): This

根据指定的资源文件，设置下拉菜单显示的最大高度，不支持设置百分比。下拉菜单的默认最大高度是屏幕可用高度的80%，设置的菜单最大高度不能超过默认最大高度。

当设置为负数与零时，属性不生效，下拉菜单最大高度设为默认值，即下拉菜单最大高度默认值为屏幕可用高度的80%。

正常值范围大于0。如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉菜单显示的最大高度。

menuBackgroundColor(Color)

public func menuBackgroundColor(value: Color): This

根据指定的Color，设置下拉菜单的背景色。
参数名 参数类型 必填 默认值 描述
color Color 是 Color.Transparent 下拉菜单的背景色。

menuBackgroundColor(UInt32)

public func menuBackgroundColor(value: UInt32): This

根据指定的色值，设置下拉菜单的背景色。
参数名 参数类型 必填 默认值 描述
color UInt32 是 - 下拉菜单的背景色。

menuBackgroundColor(CJResource)

public func menuBackgroundColor(value: CJResource): This

根据指定的资源文件，设置下拉菜单的背景色。
参数名 参数类型 必填 默认值 描述
color CJResource 是 - 下拉菜单的背景色。

menuBackgroundBlurStyle(BlurStyle)

public func menuBackgroundBlurStyle(value: BlurStyle): This

设置下拉菜单的背景模糊材质。
参数名 参数类型 必填 默认值 描述
value BlurStyle 是 BlurStyle.COMPONENT_ULTRA_THICK 下拉菜单的背景模糊材质。

枚举类型

OptionWidthMode
枚举值 描述
FIT_CONTENT 设置该值时，下拉菜单宽度按默认2栅格显示。
FIT_TRIGGER 设置下拉菜单继承下拉按钮宽度。

ArrowPosition
枚举值 描述
END 文字在前，箭头在后。
START 箭头在前，文字在后。

MenuAlignType
枚举值 描述
START 按照语言方向起始端对齐。
CENTER 居中对齐。
END 按照语言方向末端对齐。

自定义类型说明

SelectOption

设置下拉选项。

构造函数

init(String, String)

public init(value: String, icon!: String)

构造一个SelectOption对象。
参数名 参数类型 必填 默认值 描述
value String 是 - 下拉选项内容。
icon String 是 - 下拉选项图片。

init(String, CJResource)

public init(value: String, icon!: CJResource)

构造一个SelectOption对象。
参数名 参数类型 必填 默认值 描述
value String 是 - 下拉选项内容。
icon CJResource 是 - 下拉选项图片。

init(CJResource, String)

public init(value: CJResource, icon!: String)

构造一个SelectOption对象。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉选项内容。
icon String 是 - 下拉选项图片。

init(CJResource, CJResource)

public init(value: CJResource, icon!: CJResource)

构造一个SelectOption对象。
参数名 参数类型 必填 默认值 描述
value CJResource 是 - 下拉选项内容。
icon CJResource 是 - 下拉选项图片。

MenuOffset

相对布局完成位置坐标偏移量。

构造函数

init(Length, Length)

public init(dx: Length, dy: Length)

构造一个MenuOffset结构体。
参数名 参数类型 必填 默认值 描述
dx Length 是 - 水平方向偏移量。
dy Length 是 - 竖直方向偏移量。

init(Float64, Float64)

public init(dx: Float64, dy: Float64)

构造一个MenuOffset结构体。
参数名 参数类型 必填 默认值 描述
dx Float64 是 - 水平方向偏移量。
dy Float64 是 - 竖直方向偏移量。

init(Int64, Int64)

public init(dx: Int64, dy: Int64)

构造一个MenuOffset结构体。
参数名 参数类型 必填 默认值 描述
dx Int64 是 - 水平方向偏移量。
dy Int64 是 - 竖直方向偏移量。

init(CJResource, CJResource)

public init(dx: CJResource, dy: CJResource)

构造一个MenuOffset结构体。
参数名 参数类型 必填 默认值 描述
dx CJResource 是 - 水平方向偏移量。
dy CJResource 是 - 竖直方向偏移量。

事件

onSelect( (Int32, String) -> Unit)

public func onSelect(callback: (Int32, String) -> Unit): This

下拉菜单选中某一项的回调。
参数名 参数类型 描述
callback (Int32, String) -> Unit 下拉菜单选中某一项的回调。

示例

package ohos_app_cangjie_entry
    import ohos.base.* 
    import ohos.component.* 
    import ohos.state_manage.*
    import ohos.state_macro_manage.* 
    @Entry    
    @Component
    class MyView {
    @State        var text: String = "TTTTT"
    @State        var index: Int32 = 2 
    @State        var space: Int64 = 8 
    @State        var values1: Array<SelectOption> = Array<SelectOption>([                SelectOption("aaa", icon: @r(app.media.startIcon)),                SelectOption("bbb", icon: @r(app.media.startIcon)),                SelectOption("ccc", icon: @r(app.media.startIcon)),                SelectOption("ddd", icon: @r(app.media.startIcon))])            
    @State        var arrow: ArrowPosition = ArrowPosition.END            func build() {            Column {                Select(this.values1)                .selected(1)                .value(this.text)                .font(size: 16.vp, weight: FontWeight.W500)                .fontColor(0x182431)                .selectedOptionFont(size: 16.vp, weight: FontWeight.W400)                .space(this.space)                .arrowPosition(this.arrow)                .menuAlign(MenuAlignType.START, offset: MenuOffset(0, 0))                .optionWidth(200)                .optionHeight(300)                .onSelect({ index: Int32, text: String =>                    AppLog.info(" ==================  Select ====================: ${index}")                    AppLog.info(" ==================  text ====================: ${text}")                    this.index = index;                    this.text = text;                })            }.width(100.percent)        }    }

如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191” 备注cangjie

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容