鸿蒙OpenHarmony【Select】ArkTS按钮与选择

最新推荐文章于 2025-04-08 16:28:38 发布
最新推荐文章于 2025-04-08 16:28:38 发布
阅读量1.4k 收藏 30
点赞数 7
分类专栏： dd 文章标签： 鸿蒙 鸿蒙系统 ui harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asfn123123/article/details/143602101
版权

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

说明

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Select(options: Array<[SelectOption]>)

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsArray<[SelectOption]>是设置下拉选项。

SelectOption对象说明

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
value[ResourceStr]是下拉选项内容。元服务API： 从API version 11开始，该接口支持在元服务中使用。
icon[ResourceStr]否下拉选项图片。元服务API： 从API version 11开始，该接口支持在元服务中使用。
symbolIcon12+[SymbolGlyphModifier]否下拉选项Symbol图片。symbolIcon优先级高于icon。元服务API： 从API version 12开始，该接口支持在元服务中使用。

属性

除支持[通用属性]外，还支持以下属性：

selected

selected(value: number | Resource)

设置下拉菜单初始选项的索引，第一项的索引为0。当不设置selected属性或设置异常值时，默认选择值为-1，菜单项不选中；当设置为undefined、null时，选中第一项。

从API version 10开始，该属性支持[$$]双向绑定变量。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valuenumber[Resource]11+是

value

value(value: ResourceStr)

设置下拉按钮本身的文本内容。当菜单选中时默认会替换为菜单项文本内容。

从API version 10开始，该参数支持[$$]双向绑定变量。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[ResourceStr]11+是下拉按钮本身的文本内容。

controlSize12+

controlSize(value: ControlSize)

设置Select组件的尺寸。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[ControlSize]11+是Select组件的尺寸。默认值:ControlSize.NORMAL

controlSize、width、height接口作用优先级：

1）如果开发者只设置了width和height，当文字大小设置的是比较大的值的时候，文字超出组件大小，且以省略号方式显示；

2）如果开发者只设置了controlSize，没有设置width和height，组件宽高自适应文字，文字不超出组件，并设置最小宽度minWidth和最小高度minHeight；

3）如果controlSize、width、height接口都设置了，width和height设置的值生效，但如果width和height设置的值小于controlSize设置的最小宽度minWidth和最小高度minHeight，width和height设置的值不生效，宽高仍保持controlSize设置的最小宽度minWidth和最小高度minHeight。

menuItemContentModifier12+

menuItemContentModifier(modifier: ContentModifier)

定制Select下拉菜单项内容区的方法。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
modifier[ContentModifier]是在Select组件上，定制下拉菜单项内容区的方法。modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

divider12+

divider(options: Optional | null)

设置分割线样式，不设置该属性则按“默认值”展示分割线。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
optionsOptional<[DividerOptions]>null是

font

font(value: Font)

设置下拉按钮本身的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[Font]是下拉按钮本身的文本样式。API Version 11及以前默认值：{size: KaTeX parse error: Expected 'EOF', got '}' at position 67: …ntWeight.Medium}̲API Version 12以…r(‘sys.float.ohos_id_text_size_button2’)，否则为$r(‘sys.float.ohos_id_text_size_button1’)。

fontColor

fontColor(value: ResourceColor)

设置下拉按钮本身的文本颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[ResourceColor]是下拉按钮本身的文本颜色。默认值： r ( ′ s y s . c o l o r . o h o s i d c o l o r t e x t p r i m a r y ′ ) 混合 r('sys.color.ohos_id_color_text_primary')混合 r(′sys.color.ohosi​dc​olort​extp​rimary′)混合r(‘sys.color.ohos_id_alpha_content_primary’)的透明度。

selectedOptionBgColor

selectedOptionBgColor(value: ResourceColor)

设置下拉菜单选中项的背景色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[ResourceColor]是下拉菜单选中项的背景色。默认值： r ( ′ s y s . c o l o r . o h o s i d c o l o r c o m p o n e n t a c t i v a t e d ′ ) 混合 r('sys.color.ohos_id_color_component_activated')混合 r(′sys.color.ohosi​dc​olorc​omponenta​ctivated′)混合r(‘sys.color.ohos_id_alpha_highlight_bg’)的透明度。

selectedOptionFont

selectedOptionFont(value: Font)

设置下拉菜单选中项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[Font]是下拉菜单选中项的文本样式。默认值：{size: $r(‘sys.color.ohos_id_text_size_body1’),weight: FontWeight.Regular}

selectedOptionFontColor

selectedOptionFontColor(value: ResourceColor)

设置下拉菜单选中项的文本颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[ResourceColor]是下拉菜单选中项的文本颜色。默认值：$r(‘sys.color.ohos_id_color_text_primary_activated’)

optionBgColor

optionBgColor(value: ResourceColor)

设置下拉菜单项的背景色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[ResourceColor]是下拉菜单项的背景色。默认值：API version 11之前，默认值为Color.White。API version 11及之后，默认值为Color.Transparent。

optionFont

optionFont(value: Font)

设置下拉菜单项的文本样式。当size为0的时候，文本不显示，当size为负值的时候，文本的size按照默认值显示。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[Font]是下拉菜单项的文本样式。默认值：{size: $r(‘sys.float.ohos_id_text_size_body1’),weight: FontWeight.Regular}

optionFontColor

optionFontColor(value: ResourceColor)

设置下拉菜单项的文本颜色。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[ResourceColor]是下拉菜单项的文本颜色。默认值：$r(‘sys.color.ohos_id_color_text_primary’)

space10+

space(value: Length)

设置下拉菜单项的文本与箭头之间的间距。不支持设置百分比。设置为null、undefined，或者小于等于8的值，取默认值。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[Length]是下拉菜单项的文本与箭头之间的间距。默认值：8

arrowPosition10+

arrowPosition(value: ArrowPosition)

设置下拉菜单项的文本与箭头之间的对齐方式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[ArrowPosition]是下拉菜单项的文本与箭头之间的对齐方式。默认值：ArrowPosition.END

menuAlign10+

menuAlign(alignType: MenuAlignType, offset?: Offset)

设置下拉按钮与下拉菜单间的对齐方式。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
alignType[MenuAlignType]是对齐方式类型。默认值：MenuAlignType.START
offset[Offset]否按照对齐类型对齐后，下拉菜单相对下拉按钮的偏移量。默认值：{dx: 0, dy: 0}

optionWidth11+

optionWidth(value: Dimension | OptionWidthMode )

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

当设置为异常值或小于最小宽度56vp时，属性不生效，菜单项宽度设为默认值，即菜单默认宽度为2栅格。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[Dimension][OptionWidthMode]是

optionHeight11+

optionHeight(value: Dimension)

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

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

如果下拉菜单所有选项的实际高度没有设定的高度大，下拉菜单的高度按实际高度显示。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[Dimension]是下拉菜单显示的最大高度。

menuBackgroundColor11+

menuBackgroundColor(value: ResourceColor)

设置下拉菜单的背景色。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[ResourceColor]是下拉菜单的背景色。默认值：API version 11之前，默认值为$r(‘sys.color.ohos_id_color_card_bg’)。API version 11及之后，默认值为Color.Transparent。

menuBackgroundBlurStyle11+

menuBackgroundBlurStyle(value: BlurStyle)

设置下拉菜单的背景模糊材质。

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
value[BlurStyle]是下拉菜单的背景模糊材质。默认值：BlurStyle.COMPONENT_ULTRA_THICK

ArrowPosition10+枚举说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
END10+文字在前，箭头在后。
START10+箭头在前，文字在后。

MenuAlignType10+枚举说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称描述
START按照语言方向起始端对齐。
CENTER居中对齐。
END按照语言方向末端对齐。

MenuItemConfiguration12+对象说明

元服务API： 从API version 12开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
value[ResourceStr]是下拉菜单项的文本内容。
icon[ResourceStr]否下拉菜单项的图片内容。
symbolIcon12+[SymbolGlyphModifier]否下拉选项Symbol图片内容。
selectedboolean是下拉菜单项是否被选中。默认值：false
indexnumber是下拉菜单项的索引。
triggerSelect(index: number, value: string) :void是下拉菜单选中某一项的回调函数。index: 选中菜单项的索引。value: 选中菜单项的文本。说明: index会赋值给事件[onSelect]回调中的索引参数； value会返回给Select组件显示，同时会赋值给事件[onSelect]回调中的文本参数。

事件

onSelect

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

下拉菜单选中某一项的回调。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
indexnumber是选中项的索引。
valuestring是选中项的值。

示例1

// 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: $r("app.media.selection") },
        { value: 'bbb', icon: $r("app.media.selection") },
        { value: 'ccc', icon: $r("app.media.selection") },
        { value: 'ddd', icon: $r("app.media.selection") }])
        .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})
        .optionWidth(200)
        .optionHeight(300)
        .onSelect((index:number, text?: string | undefined)=>{
          console.info('Select:' + index)
          this.index = index;
          if(text){
            this.text = text;
          }
        })
    }.width('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例2

该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + 图片 + 空白间隔 + 文本 + 绘制三角形”，点击菜单选项后Select组件显示菜单选项的文本内容。

import { MenuItemModifier } from '@kit.ArkUI'

class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
  modifierText: string = ""
  constructor(text: string) {
    this.modifierText = text;
  }
  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
    return wrapBuilder(MenuItemBuilder)
  }
}

@Builder
function MenuItemBuilder(configuration: MenuItemConfiguration) {
  Row() {
    Text(configuration.value)
    Blank()
    Image(configuration.icon).size({ width: 40, height: 40 })
    Blank(30)
    Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)
    Path()
      .width('100px')
      .height('150px')
      .commands('M40 0 L80 100 L0 100 Z')
      .fillOpacity(0)
      .stroke(Color.Black)
      .strokeWidth(3)
  }
  .onClick(() => {
    configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
  })
}

@Entry
@Component
struct SelectExample {
  @State text: string = "有modifier"
  build() {
    Column() {
      Row() {
        Select([{ value: 'item1', icon: $r("app.media.icon") },
          { value: 'item2', icon: $r("app.media.icon") }])
          .value(this.text)
          .onSelect((index:number, text?: string)=>{
            console.info('Select index:' + index)
            console.info('Select text:' + text)
          })
          .menuItemContentModifier(new MyMenuItemContentModifier("我来自Modifier"))

      }.alignItems(VerticalAlign.Center).height("50%")
    }
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例3

该示例实现了一个下拉菜单中图片为Symbol的Select组件。

// xxx.ets
import { SymbolGlyphModifier } from '@kit.ArkUI'

@Entry
@Component
struct SelectExample {
  @State text: string = "TTTTT"
  @State index: number = 2
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END
  @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_wifi')).fontColor([Color.Green]);
  @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')).fontColor([Color.Red]);
  @State symbolModifier3: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]);
  @State symbolModifier4: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]);
  build() {
    Column() {
      Select([{ value: 'aaa', symbolIcon: this.symbolModifier1 },
        { value: 'bbb', symbolIcon: this.symbolModifier2 },
        { value: 'ccc', symbolIcon: this.symbolModifier3 },
        { value: 'ddd', symbolIcon: this.symbolModifier4 }])
        .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%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例4

该示例实现了一个自定义下拉菜选项的Select组件。自定义下拉菜单选项样式为“文本 + Symbol图片 + 空白间隔 + 文本 + 绘制三角形”，点击菜单选项后Select组件显示菜单选项的文本内容。

import { MenuItemModifier, SymbolGlyphModifier } from '@kit.ArkUI'

class MyMenuItemContentModifier implements ContentModifier<MenuItemConfiguration> {
  modifierText: string = ""
  constructor(text: string) {
    this.modifierText = text;
  }
  applyContent(): WrappedBuilder<[MenuItemConfiguration]> {
    return wrapBuilder(MenuItemBuilder)
  }
}

@Builder
function MenuItemBuilder(configuration: MenuItemConfiguration) {
  Row() {
    Text(configuration.value)
    Blank()
    if (configuration.symbolIcon) {
      SymbolGlyph().attributeModifier(configuration.symbolIcon).fontSize(24)
    } else if (configuration.icon) {
      Image(configuration.icon).size({ width: 24, height: 24 })
    }
    Blank(30)
    Text((configuration.contentModifier as MyMenuItemContentModifier).modifierText)
    Blank(30)
    Path()
      .width('100px')
      .height('150px')
      .commands('M40 0 L80 100 L0 100 Z')
      .fillOpacity(0)
      .stroke(Color.Black)
      .strokeWidth(3)
  }
  .onClick(() => {
    configuration.triggerSelect(configuration.index, configuration.value.valueOf().toString())
  })
}

@Entry
@Component
struct SelectExample {
  @State text: string = "Content Modifier Select"
  @State symbolModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontColor([Color.Gray]);
  @State symbolModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.exposure')).fontColor([Color.Gray]);
  build() {
    Column() {
      Row() {
        Select([{ value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier1 },
          { value: 'item1', icon: $r('app.media.icon'), symbolIcon: this.symbolModifier2 }])
          .value(this.text)
          .onSelect((index:number, text?: string)=>{
            console.info('Select index:' + index)
            console.info('Select text:' + text)
          })
          .menuItemContentModifier(new MyMenuItemContentModifier("Content Modifier"))

      }.alignItems(VerticalAlign.Center).height('50%')
    }
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例5

该示例实现了分割线样式支持自定义。

// xxx.ets
@Entry
@Component
struct SelectExample {
  @State text: string = "TTTTT"
  @State index: number = -1
  @State arrowPosition: ArrowPosition = ArrowPosition.END
  build() {
    Column() {
      Select([{ value: 'aaa', icon: $r("app.media.icon") },
        { value: 'bbb', icon: $r("app.media.icon") },
        { value: 'ccc', icon: $r("app.media.icon") },
        { value: 'ddd', icon: $r("app.media.icon") }])
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, {dx:0, dy:0})
        .optionWidth(200)
        .optionHeight(300)
        .divider( { strokeWidth: 5, color: Color.Blue, startMargin: 10, endMargin: 10 })
        .onSelect((index:number, text?: string | undefined)=>{
          console.info('Select:' + index)
          this.index = index;
          if(text){
            this.text = text;
          }
        })
    }.width('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

示例6

该示例实现了隐藏分割线。

// xxx.ets
@Entry
@Component
struct SelectExample {
  @State text: string = "TTTTT"
  @State index: number = -1
  @State arrowPosition: ArrowPosition = ArrowPosition.END
  build() {
    Column() {
      Select([{ value: 'aaa', icon: $r("app.media.icon") },
        { value: 'bbb', icon: $r("app.media.icon") },
        { value: 'ccc', icon: $r("app.media.icon") },
        { value: 'ddd', icon: $r("app.media.icon") }])
        .selected(this.index)
        .value(this.text)
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .arrowPosition(this.arrowPosition)
        .menuAlign(MenuAlignType.START, {dx:0, dy:0})
        .optionWidth(200)
        .optionHeight(300)
        .divider( null )
        .onSelect((index:number, text?: string | undefined)=>{
          console.info('Select:' + index)
          this.index = index;
          if(text){
            this.text = text;
          }
        })
    }.width('100%')
  }
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

鸿蒙应用开发之下拉菜单选择组件
大坡3D软件开发
04-16 930
Select([{ value: '菜单1', icon: $r('app.media.demo3') },由于它是下拉式的菜单，所以候选的内容建议不要太多，否则会滚动比较麻烦。{ value: '菜单4', icon: $r('app.media.demo3') }]){ value: '菜单2', icon: $r('app.media.demo3') },{ value: '菜单3', icon: $r('app.media.demo3') },设置下拉菜单初始选项的索引，第一项的索引为0。
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
红目香薰
02-22 984
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
鸿蒙5.0版开发：ArkTS基础组件（Select）
m0_69424697的博客
09-19 1854
提供下拉选择菜单，可以让用户在多个选项之间选择。
ArkTS高效开发实战：手把手教你打造高复用性下拉菜单列表组件库
最新发布
WDJ54068923的博客
04-08 459
📌 导语“在ArkTS应用开发中，你是否遇到过这些痛点？传统下拉列表难以适配动态数据、缺乏多选能力、无法联动筛选… 我通过构建组件字典中的下拉模块，创新性地实现了可配置化下拉系统。本文将通过组件字典完整解密架构设计的全流程方案，让你的开发效率提升300%！
【鸿蒙软件开发】ArkTS基础组件之Select(下拉菜单)、Slider(滑动条)
m0_62599305的博客
10-28 6446
Select组件：提供下拉选择菜单，可以让用户在多个选项之间选择。Slider组件：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。Select组件：提供下拉选择菜单，可以让用户在多个选项之间选择。Slider组件：滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景。
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Select）
m0_64420071的博客
03-12 2149
ArkTS声明式开发（基础手势：Select）
鸿蒙5.0开发进阶：UI框架-ArkTS组件（SelectTitleBar）
Androidbye的博客
02-08 914
下拉菜单标题栏包含一个下拉菜单，可用于页面之间的切换.......
鸿蒙Harmony应用开发—ArkTS声明式开发（基础手势：Search）
m0_64420071的博客
03-12 1922
ArkTS声明式开发（基础手势：Search）
鸿蒙OpenHarmony【SelectionMenu】ArkTS文本与输入
asfn123123的博客
11-10 1135
文本选择菜单，适用于富文本组件通过[bindSelectionMenu]绑定自定义文本选择菜单，建议绑定鼠标右键或者鼠标选中方式弹出，不支持作为普通组件单独使用。
鸿蒙OpenHarmony【TextInput】ArkTS文本与输入
asfn123123的博客
11-08 1705
单行文本输入框组件。
鸿蒙ArkTS声明式组件：【Select】
2401_82772199的博客
06-29 915
提供下拉选择菜单，可以让用户在多个选项之间选择。该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
【鸿蒙实战开发】ArkTS开发选择图片、文件和拍照功能实现
HarmonyOS_002的博客
07-12 1469
1.selectPicture 提供选择图片功能我们通过系统组件 picker.PhotoViewPicker 来进行图片选择，通过配置PhotoSelectOptions，指定选择的MIMEType类型（这里PhotoViewMIMETypes.IMAGE_TYPE 图片类型） 、选择的图片最大数量 maxSelectNumber ，这里我们实现单选功能，数值设置为1即可。使用photoPicker.select 拉起系统组件进行选择，然后在回调中获取图片的uri。
鸿蒙selector的使用方式
shenfei平凡之路
07-15 608
在官网文档中，并没有详细说明按钮点击效果如何使用selector的使用方式等。因为系统还需完善，只能自己慢慢摸索了。 控件焦点状态如下，这个是动态jave代码添加组件状态时使用。 package ohos.agp.components; public class ComponentState { public static final int COMPONENT_STATE_CHECKED = 64; //被选中 public static final int COMPONENT_STAT
基础ArkTS组件：二维码，滚动条与滑动条，多选框与多选框群组（HarmonyOS学习第三课【3.4】）
qq_58213084的博客
05-08 2040
value：设置将要生成二维码的内容。.width(70)Scroller作为滚动容器组件的控制器，它提供了滚动子组件的各种能力，比如设置子组件滚动指定位置、滚动到底部以及滚动到下一页上一页等能力。目前Scrolller只支持绑定到Scroll和List上。Scroller});: Axis });scrollTo：设置子组件滚动到指定位置，在滚动的时候还可以根据animation参数设置动画。scrollEdge：滚动到边界，Edge提供了多种类型，读者可自行查阅。
鸿蒙OpenHarmony【select】JS基础组件
hhhhhh2323的博客
12-03 365
下拉选择按钮，可使用下拉菜单展示并选择内容。
华为仓颉鸿蒙next原生UI基础组件Select
BinShaosir的专栏
12-23 1041
如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！” 备注cangjie。技术交流群可加wx“
OpenHarmony实战开发-NAPI封装ArkTS接口案例。
m0_70749039的博客
04-17 1409
部分应用的主要开发语言为C/C++，但是HarmonyOS的部分接口仅以ArkTS的形式暴露，因此需要将ArkTS的接口封装为Native接口。本例以DocumentViewPicker的Select方法为例，提供了Napi封装ArkTS API的通用方法，本例包含内容如下：
ArkTS 任务统计页面
a_strong_pig的博客
12-15 1066
ArkTS 实现一个任务统计案例
鸿蒙ArkUI下拉列表组件
luck332的专栏
02-01 814
鸿蒙ArkUI下拉列表组件，官方提供的只是基础使用，在使用过程非常不方便，我们进行了组件的封装。使用也是非常得简单只需要调用组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值