回复
OpenHarmony应用开发-基础组件TextClock/TextInput/TextPicker
素年锦时静待君丶
发布于 2023-4-14 15:45
浏览
0收藏
版本：v3.2 Release
TextClock
TextClock组件通过文本将当前系统时间显示在设备上。支持不同时区的时间显示，最高精度到秒级。
说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController })
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
timeZoneOffset | number | 否 | 设置时区偏移量。 取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8。 对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间，当设置的值不在取值范围内时，将使用当前系统的时区偏移量。 默认值：当前系统的时区偏移量 |
controller | 否 | 绑定一个控制器，用来控制文本时钟的状态。 |
属性
除支持通用属性外，还支持以下属性：
名称 | 参数类型 | 描述 |
format | string | 设置显示时间格式。 日期间隔符固定为"/“，时间间隔符为”:“。 如yyyyMMdd，yyyy-MM-dd显示为yyyy/MM/dd， hhmmss显示为hh:mm:ss。 时间格式只用写一位即可，如"hhmmss"等同于"hms”。 支持的时间格式化字符串： - YYYY/yyyy：完整年份。 - YY/yy：年份后两位。 - M：月份(若想使用01月则使用MM)。 - d：日期(若想使用01日则使用dd)。 - D：年中日(一年中的第几天)。 - H：24小时制。 - h：12小时制。 - m：分钟。 - s：秒。 - SSS：毫秒。 若格式未匹配，则使用默认值。 默认值： ‘hms’ |
事件
除支持通用事件外，还支持以下事件：
名称 | 功能描述 |
onDateChange(event: (value: number) => void) | 提供时间变化回调，该事件最小回调间隔为秒。 - value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 |
TextClockController
TextClock容器组件的控制器，可以将该控制器绑定到TextClock组件，通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。
导入对象
controller: TextClockController = new TextClockController();start
start()
启动文本时钟。
stop
stop()
停止文本时钟。
示例
@Entry
@Component
struct Second {
@State accumulateTime: number = 0
// 导入对象
controller: TextClockController = new TextClockController()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Current milliseconds is ' + this.accumulateTime)
.fontSize(20)
// 以12小时制显示东八区的系统时间，精确到秒。
TextClock({ timeZoneOffset: -8, controller: this.controller })
.format('hms')
.onDateChange((value: number) => {
this.accumulateTime = value
})
.margin(20)
.fontSize(30)
Button("start TextClock")
.margin({ bottom: 10 })
.onClick(() => {
// 启动文本时钟
this.controller.start()
})
Button("stop TextClock")
.onClick(() => {
// 停止文本时钟
this.controller.stop()
})
}
.width('100%')
.height('100%')
}
}
TextInput
单行文本输入框组件。
说明：
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
placeholder | 否 | 设置无输入时的提示文本。 | |
text | 否 | 设置输入框当前的文本内容。 当组件设置stateStyles等刷新属性时，建议通过onChange事件将状态变量与文本实时绑定， 避免组件刷新时TextInput中的文本内容异常。 | |
controller8+ | 否 | 设置TextInput控制器。 |
属性
除支持通用属性外，还支持以下属性：
名称 | 参数类型 | 描述 |
type | InputType | 设置输入框类型。 默认值：InputType.Normal |
placeholderColor | 设置placeholder文本颜色。 | |
placeholderFont | Font | 设置placeholder文本样式。 |
enterKeyType | EnterKeyType | 设置输入法回车键类型，目前仅支持默认类型显示。 默认值：EnterKeyType.Done |
caretColor | 设置输入框光标颜色。 | |
maxLength | number | 设置文本的最大输入字符数。 |
inputFilter8+ | { value: ResourceStr, error?: (value: string) => void } | 正则表达式，匹配表达式的输入允许显示，不匹配的输入将被过滤。目前仅支持单个字符匹配，不支持字符串匹配。 - value：设置正则表达式。 - error：正则匹配失败时，返回被过滤的内容。 |
copyOption9+ | 设置输入的文本是否可复制。 设置CopyOptions.None时，当前TextInput中的文字无法被复制或剪切，仅支持粘贴。 | |
showPasswordIcon9+ | boolean | 密码输入模式时，输入框末尾的图标是否显示。 默认值：true |
style9+ | TextInputStyle | 设置输入框为默认风格或内联输入风格。 默认值：TextInputStyle.Default |
textAlign9+ | 设置输入文本在输入框中的对齐方式。 默认值：TextAlign.Start |
说明：
通用属性padding的默认值为：
{
top: 8 vp,
right: 16 vp,
bottom: 8 vp,
left: 16 vp
}EnterKeyType枚举说明
名称 | 描述 |
Go | 显示为前往样式。 |
Search | 显示为搜索样式。 |
Send | 显示为发送样式。 |
Next | 显示为下一个样式。 |
Done | 显示为确认样式。 |
InputType枚举说明
名称 | 描述 |
Normal | 基本输入模式。 支持输入数字、字母、下划线、空格、特殊字符。 |
Password | 密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。 |
邮箱地址输入模式。支持数字，字母，下划线，以及@字符（只能存在一个@字符）。 | |
Number | 纯数字输入模式。 |
PhoneNumber9+ | 电话号码输入模式。 支持输入数字、+ 、-、*、#，长度不限。 |
TextInputStyle9+枚举说明
名称 | 描述 |
Default | 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。 |
Inline | 内联输入风格。文本选中底板高度与输入框高度相同。 |
事件
除支持通用事件外，还支持以下事件：
名称 | 功能描述 |
onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。 value：输入的文本内容。 触发该事件的条件： 1、键盘输入。 2、粘贴、剪切。 3、键盘快捷键Ctrl+v。 |
onSubmit(callback: (enterKey: EnterKeyType) => void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。 enterKeyType：输入法回车键类型。具体类型见EnterKeyType枚举说明。 |
onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。 |
onEditChange(callback: (isEditing: boolean) => void)8+ | 输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。isEditing为true表示正在输入。 |
onCopy(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板复制按钮，触发该回调。 value：复制的文本内容。 |
onCut(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板剪切按钮，触发该回调。 value：剪切的文本内容。 |
onPaste(callback:(value: string) => void)8+ | 长按输入框内部区域弹出剪贴板后，点击剪切板粘贴按钮，触发该回调。 value：粘贴的文本内容。 |
TextInputController8+
TextInput组件的控制器。
导入对象
controller: TextInputController = new TextInputController()caretPosition
caretPosition(value: number): void
设置输入光标的位置。
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
value | number | 是 | 从字符串开始到光标所在位置的字符长度。 |
示例
// xxx.ets
@Entry
@Component
struct TextInputExample {
@State text: string = ''
controller: TextInputController = new TextInputController()
build() {
Column() {
TextInput({ text: this.text, placeholder: 'input your word...', controller: this.controller })
.placeholderColor(Color.Grey)
.placeholderFont({ size: 14, weight: 400 })
.caretColor(Color.Blue)
.width(400)
.height(40)
.margin(20)
.fontSize(14)
.fontColor(Color.Black)
.onChange((value: string) => {
this.text = value
})
Text(this.text)
Button('Set caretPosition 1')
.margin(15)
.onClick(() => {
// 将光标移动至第一个字符后
this.controller.caretPosition(1)
})
// 密码输入框
TextInput({ placeholder: 'input your password...' })
.width(400)
.height(40)
.margin(20)
.type(InputType.Password)
.maxLength(9)
.showPasswordIcon(true)
// 内联风格输入框
TextInput({ placeholder: 'inline style' })
.width(400)
.height(50)
.margin(20)
.borderRadius(0)
.style(TextInputStyle.Inline)
}.width('100%')
}
}
TextPicker
滑动选择文本内容的组件。
说明：
该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TextPicker(options?: {range: string[]|Resource, selected?: number, value?: string})
根据range指定的选择范围创建文本选择器。
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
range | string[] | Resource | 是 | 选择器的数据选择列表。不可设置为空数组，若设置为空数组，则不显示；若动态变化为空数组，则保持当前正常值显示。 |
selected | number | 否 | 设置默认选中项在数组中的索引值。 默认值：0 |
value | string | 否 | 设置默认选中项的值，优先级低于selected。 默认值：第一个元素值 |
属性
除支持通用属性外，还支持以下属性：
名称 | 参数类型 | 描述 |
defaultPickerItemHeight | number | string | 设置Picker各选择项的高度。 |
事件
除支持通用事件外，还支持以下事件：
名称 | 描述 |
onChange(callback: (value: string, index: number) => void) | 滑动选中TextPicker文本内容后，触发该回调。 - value: 当前选中项的文本。 - index: 当前选中项的索引值。 |
示例
// xxx.ets
@Entry
@Component
struct TextPickerExample {
private select: number = 1
private fruits: string[] = ['apple1', 'orange2', 'peach3', 'grape4']
build() {
Column() {
TextPicker({ range: this.fruits, selected: this.select })
.onChange((value: string, index: number) => {
console.info('Picker item changed, value: ' + value + ', index: ' + index)
})
}
}
}
标签
已于2023-4-14 15:45:13修改
赞
收藏
回复
相关推荐
