OpenHarmony应用开发-基础组件Search/Select/Slider/Span

素年锦时静待君丶
发布于 2023-4-14 15:42
浏览
0收藏

版本:v3.2 Release

Search

搜索框组件,适用于浏览器的搜索内容输入框等应用场景。

说明:

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

子组件

接口

Search(options?: { value?: string; placeholder?: string; icon?: string; controller?: SearchController })

参数:

参数名

参数类型

必填

参数描述

value

string

设置当前显示的搜索文本内容。

placeholder

string

设置无输入时的提示文本。

icon

string

设置搜索图标路径,默认使用系统搜索图标,图标支持的图源格式: svg、jpg和png。

controller

SearchController

设置Search组件控制器。

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

searchButton

string

搜索框末尾搜索按钮文本内容,默认无搜索按钮。

placeholderColor

​ResourceColor​

设置placeholder文本颜色。

placeholderFont

​Font​

设置placeholder文本样式,包括字体大小,字体粗细,字体族,字体风格。目前仅支持默认字体族。

textFont

​Font​

设置搜索框内输入文本样式,包括字体大小,字体粗细,字体族,字体风格。目前仅支持默认字体族。

textAlign

​TextAlign​

设置文本在搜索框中的对齐方式。

默认值:TextAlign.Start

copyOption9+

​CopyOptions​

设置输入的文本是否可复制。

事件

除支持​​通用事件​​外,还支持以下事件:

名称

功能描述

onSubmit(callback: (value: string) => void)

点击搜索图标、搜索按钮或者按下软键盘搜索按钮时触发该回调。

-value: 当前搜索框中输入的文本内容。

onChange(callback: (value: string) => void)

输入内容发生变化时,触发该回调。

-value: 当前搜索框中输入的文本内容。

onCopy(callback: (value: string) => void)

长按搜索框弹出剪切板之后,点击剪切板的复制按钮触发该回调。

-value: 复制的文本内容。

onCut(callback: (value: string) => void)

长按搜索框弹出剪切板之后,点击剪切板的剪切按钮触发该回调。

-value: 剪切的文本内容。

onPaste(callback: (value: string) => void)

长按搜索框弹出剪切板之后,点击剪切板的粘贴按钮触发该回调。

-value: 粘贴的文本内容。

SearchController

Search组件的控制器,目前通过它可控制Search组件的光标位置。

导入对象

controller: SearchController = new SearchController()
caretPosition

caretPosition(value: number): void

设置输入光标的位置。

参数:

参数名

参数类型

必填

参数描述

value

number

从字符串开始到光标所在位置的长度。

示例

// xxx.ets
@Entry
@Component
struct SearchExample {
  @State changeValue: string = ''
  @State submitValue: string = ''
  controller: SearchController = new SearchController()

  build() {
    Column() {
      Text('onSubmit:' + this.submitValue).fontSize(18).margin(15)
      Text('onChange:' + this.changeValue).fontSize(18).margin(15)
      Search({ value: this.changeValue, placeholder: 'Type to search...', controller: this.controller })
        .searchButton('SEARCH')
        .width(400)
        .height(40)
        .backgroundColor('#F5F5F5')
        .placeholderColor(Color.Grey)
        .placeholderFont({ size: 14, weight: 400 })
        .textFont({ size: 14, weight: 400 })
        .onSubmit((value: string) => {
          this.submitValue = value
        })
        .onChange((value: string) => {
          this.changeValue = value
        })
        .margin(20)
      Button('Set caretPosition 1')
        .onClick(() => {
          // 设置光标位置到输入的第一个字符后
          this.controller.caretPosition(1)
        })
    }.width('100%')
  }
}

OpenHarmony应用开发-基础组件Search/Select/Slider/Span-开源基础软件社区

Select

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

说明:

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

子组件

接口

Select(options: Array<​​SelectOption​​>)

SelectOption对象说明

参数名

参数类型

必填

参数描述

value

​ResourceStr​

下拉选项内容。

icon

​ResourceStr​

下拉选项图片。

属性

除支持​​通用属性​​外,还支持以下属性:

名称

参数类型

描述

selected

number

设置下拉菜单初始选项的索引,第一项的索引为0。

当不设置selected属性时,默认选择值为-1,菜单项不选中。

value

string

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

font

​Font​

设置下拉按钮本身的文本样式。

默认值:

{

size: ‘16fp’,

weight: FontWeight.Medium

}

fontColor

​ResourceColor​

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

默认值:‘#E6FFFFFF’

selectedOptionBgColor

​ResourceColor​

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

默认值:‘#33007DFF’

selectedOptionFont

​Font​

设置下拉菜单选中项的文本样式。

默认值:

{

size: ‘16fp’,

weight: FontWeight.Regular

}

selectedOptionFontColor

​ResourceColor​

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

默认值:‘#ff007dff’

optionBgColor

​ResourceColor​

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

默认值:‘#ffffffff’

optionFont

​Font​

设置下拉菜单项的文本样式。

默认值:

{

size: ‘16fp’,

weight: FontWeight.Regular

}

optionFontColor

​ResourceColor​

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

默认值:‘#ff182431’

事件

名称

功能描述

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

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

index:选中项的索引。

value:选中项的值。

示例

// xxx.ets
@Entry
@Component
struct SelectExample {
  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(2)
        .value('TTTTT')
        .font({ size: 16, weight: 500 })
        .fontColor('#182431')
        .selectedOptionFont({ size: 16, weight: 400 })
        .optionFont({ size: 16, weight: 400 })
        .onSelect((index: number) => {
          console.info('Select:' + index)
        })
    }.width('100%')
  }
}

OpenHarmony应用开发-基础组件Search/Select/Slider/Span-开源基础软件社区

Slider

滑动条组件,通常用于快速调节设置值,如音量调节、亮度调节等应用场景。

说明:

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

子组件

接口

Slider(options?: {value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名

参数类型

必填

参数描述

value

number

当前进度值。

默认值:0

min

number

设置最小值。

默认值:0

max

number

设置最大值。

默认值:100

说明:

min >= max异常情况,min取默认值0,max取默认值100。

value不在[min, max]范围之内,取min/max,靠近min取min,靠近max取max。

step

number

设置Slider滑动步长。

默认值:1

取值范围:[0.01, max]

说明:

设置小于0或百分比的值时,按默认值显示。

style

​SliderStyle​

设置Slider的滑块与滑轨显示样式。

默认值:SliderStyle.OutSet

direction8+

​Axis​

设置滑动条滑动方向为水平或竖直方向。

默认值:Axis.Horizontal

reverse8+

boolean

设置滑动条取值范围是否反向,横向Slider默认为从左往右滑动,竖向Slider默认为从上往下滑动。

默认值:false

SliderStyle枚举说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称

描述

OutSet

滑块在滑轨上。

InSet

滑块在滑轨内。

支持除触摸热区以外的通用属性设置。

名称

参数类型

描述

blockColor

​ResourceColor​

设置滑块的颜色。

从API version 9开始,该接口支持在ArkTS卡片中使用。

trackColor

​ResourceColor​

设置滑轨的背景颜色。

从API version 9开始,该接口支持在ArkTS卡片中使用。

selectedColor

​ResourceColor​

设置滑轨的已滑动部分颜色。

从API version 9开始,该接口支持在ArkTS卡片中使用。

showSteps

boolean

设置当前是否显示步长刻度值。

默认值:false

从API version 9开始,该接口支持在ArkTS卡片中使用。

showTips

boolean

设置滑动时是否显示百分比气泡提示。

默认值:false

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:

当direction的属性值为Axis.Horizontal时,tip显示在滑块正上方。值为Axis.Vertical时,tip显示在滑块正左边。

tip的绘制区域为Slider自身节点的overlay。

Slider不设置边距,或者边距比较小时,tip会被截断。

trackThickness

​Length​

设置滑轨的粗细。

默认值:当参数style的值设置​​SliderStyle​​​.OutSet 时为 4.0vp,​​SliderStyle​​.InSet时为20.0vp

从APIversion9开始,该接口支持在ArkTS卡片中使用。

说明:

设置为小于0的值时,按默认值显示。

事件

通用事件仅支持挂载卸载事件:OnAppear,OnDisAppear。

名称

功能描述

onChange(callback: (value: number, mode: SliderChangeMode) => void)

Slider拖到或点击时触发事件回调。

value:当前滑动进度值。若返回值有小数,可使用number.toFixed()方法将数据处理为预期的精度。

mode:事件触发的相关状态值。

从API version 9开始,该接口支持在ArkTS卡片中使用。

说明:

Begin和End状态当手势点击时都会触发,Moving和Click状态当value值发生变换时触发。

当连贯动作为拖动动作时,不触发Click状态。

value值的变化范围为对应步长steps数组。

SliderChangeMode枚举说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称

描述

Begin

0

手势/鼠标接触或者按下滑块。

Moving

1

正在拖动滑块过程中。

End

2

手势/鼠标离开滑块。

Click

3

点击滑动条使滑块位置移动。

示例

// xxx.ets
@Entry
@Component
struct SliderExample {
  @State outSetValueOne: number = 40
  @State inSetValueOne: number = 40
  @State outSetValueTwo: number = 40
  @State inSetValueTwo: number = 40
  @State vOutSetValueOne: number = 40
  @State vInSetValueOne: number = 40
  @State vOutSetValueTwo: number = 40
  @State vInSetValueTwo: number = 40

  build() {
    Column({ space: 8 }) {
      Text('outset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
          value: this.outSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.OutSet
        })
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        // toFixed(0)将滑动条返回值处理为整数精度
        Text(this.outSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')
      Row() {
        Slider({
          value: this.outSetValueTwo,
          step: 10,
          style: SliderStyle.OutSet
        })
          .showSteps(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.outSetValueTwo = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.outSetValueTwo.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Text('inset slider').fontSize(9).fontColor(0xCCCCCC).width('90%').margin(15)
      Row() {
        Slider({
          value: this.inSetValueOne,
          min: 0,
          max: 100,
          style: SliderStyle.InSet
        })
          .blockColor('#191970')
          .trackColor('#ADD8E6')
          .selectedColor('#4169E1')
          .showTips(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.inSetValueOne = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.inSetValueOne.toFixed(0)).fontSize(12)
      }
      .width('80%')
      Row() {
        Slider({
          value: this.inSetValueTwo,
          step: 10,
          style: SliderStyle.InSet
        })
          .blockColor('#191970')
          .trackColor('#ADD8E6')
          .selectedColor('#4169E1')
          .showSteps(true)
          .onChange((value: number, mode: SliderChangeMode) => {
            this.inSetValueTwo = value
            console.info('value:' + value + 'mode:' + mode.toString())
          })
        Text(this.inSetValueTwo.toFixed(0)).fontSize(12)
      }
      .width('80%')

      Row() {
        Column() {
          Text('vertical outset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
          Row() {
            Slider({
              value: this.vOutSetValueOne,
              style: SliderStyle.OutSet,
              direction: Axis.Vertical
            })
              .blockColor('#191970')
              .trackColor('#ADD8E6')
              .selectedColor('#4169E1')
              .showTips(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vOutSetValueOne = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
            Slider({
              value: this.vOutSetValueTwo,
              step: 10,
              style: SliderStyle.OutSet,
              direction: Axis.Vertical
            })
              .blockColor('#191970')
              .trackColor('#ADD8E6')
              .selectedColor('#4169E1')
              .showSteps(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vOutSetValueTwo = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
          }
        }.width('50%').height(300)

        Column() {
          Text('vertical inset slider').fontSize(9).fontColor(0xCCCCCC).width('50%').margin(15)
          Row() {
            Slider({
              value: this.vInSetValueOne,
              style: SliderStyle.InSet,
              direction: Axis.Vertical,
              reverse: true // 竖向的Slider默认是上端是min值,下端是max值,因此想要从下往上滑动,需要设置reverse为true
            })
              .showTips(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vInSetValueOne = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
            Slider({
              value: this.vInSetValueTwo,
              step: 10,
              style: SliderStyle.InSet,
              direction: Axis.Vertical,
              reverse: true
            })
              .showSteps(true)
              .onChange((value: number, mode: SliderChangeMode) => {
                this.vInSetValueTwo = value
                console.info('value:' + value + 'mode:' + mode.toString())
              })
          }
        }.width('50%').height(300)
      }
    }.width('100%')
  }
}

OpenHarmony应用开发-基础组件Search/Select/Slider/Span-开源基础软件社区

Span

作为Text组件的子组件,用于显示行内文本的组件。

说明:

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

子组件

接口

Span(value: string | Resource)

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名

参数类型

必填

参数描述

value

string | ​​Resource​

文本内容。

属性

通用属性方法仅支持​​通用文本样式​​。

名称

参数类型

描述

decoration

{

type: ​​TextDecorationType​​,

color?: ​​ResourceColor​​}

设置文本装饰线样式及其颜色。

默认值:{

type: TextDecorationType.None

color:Color.Black

}

从API version 9开始,该接口支持在ArkTS卡片中使用。

letterSpacing

number | string

设置文本字符间距。取值小于0,字符聚集重叠,取值大于0且随着数值变大,字符间距越来越大,稀疏分布。

从API version 9开始,该接口支持在ArkTS卡片中使用。

textCase

​TextCase​

设置文本大小写。

默认值:TextCase.Normal

从API version 9开始,该接口支持在ArkTS卡片中使用。

事件

通用事件仅支持​​点击事件​​。

说明:

由于Span组件无尺寸信息,因此点击事件返回的ClickEvent对象的target属性无效。

示例

// xxx.ets
@Entry
@Component
struct SpanExample {
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
      Text('Basic Usage').fontSize(9).fontColor(0xCCCCCC)
      Text() {
        Span('This is the Span component').fontSize(12).textCase(TextCase.Normal)
          .decoration({ type: TextDecorationType.None, color: Color.Red })
      }

      // 文本横线添加
      Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC)
      Text() {
        Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12)
      }

      Text() {
        Span('I am LineThrough-span')
          .decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
          .fontSize(12)
      }

      Text() {
        Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12)
      }

      // 文本字符间距
      Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC)
      Text() {
        Span('span letter spacing')
          .letterSpacing(0)
          .fontSize(12)
      }

      Text() {
        Span('span letter spacing')
          .letterSpacing(-2)
          .fontSize(12)
      }

      Text() {
        Span('span letter spacing')
          .letterSpacing(3)
          .fontSize(12)
      }


      // 文本大小写展示设置
      Text('Text Case').fontSize(9).fontColor(0xCCCCCC)
      Text() {
        Span('I am Lower-span').fontSize(12)
          .textCase(TextCase.LowerCase)
          .decoration({ type: TextDecorationType.None })
      }

      Text() {
        Span('I am Upper-span').fontSize(12)
          .textCase(TextCase.UpperCase)
          .decoration({ type: TextDecorationType.None })
      }
    }.width('100%').height(250).padding({ left: 35, right: 35, top: 35 })
  }
}

OpenHarmony应用开发-基础组件Search/Select/Slider/Span-开源基础软件社区



文章转载自:​​https://docs.openharmony.cn/pages/v3.2/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md/​

已于2023-4-14 15:42:52修改
收藏
回复
举报
回复
    相关推荐