回复
HarmonyOS API：基础组件
joytrian
发布于 2023-3-24 13:58
浏览
0收藏
版本：v3.1 Beta
TextArea
更新时间: 2023-03-03 17:21
多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。
说明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
placeholder | 否 | 设置无输入时的提示文本。 | |
text | 否 | 设置输入框当前的文本内容。 | |
controller8+ | 否 | 设置TextArea控制器。 |
属性
除支持通用属性外，还支持以下属性：
名称 | 参数类型 | 描述 |
placeholderColor | 设置placeholder文本颜色。 | |
placeholderFont | Font | 设置placeholder文本样式。 |
textAlign | 设置文本在输入框中的水平对齐式。 默认值：TextAlign.Start | |
caretColor | 设置输入框光标颜色。 | |
inputFilter8+ | { value: ResourceStr, error?: (value: string) => void } | 通过正则表达式设置输入过滤器。匹配表达式的输入允许显示，不匹配的输入将被过滤。仅支持单个字符匹配，不支持字符串匹配。 - value：设置正则表达式。 - error：正则匹配失败时，返回被过滤的内容。 |
copyOption9+ | 设置输入的文本是否可复制。 设置CopyOptions.None时，当前TextArea中的文字无法被复制或剪切，仅支持粘贴。 |
事件
除支持通用事件外，还支持以下事件：
名称 | 功能描述 |
onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。 - value：当前输入的文本内容。 |
TextAreaController8+
TextArea组件的控制器，目前可通过它设置TextArea组件的光标位置。
导入对象
controller: TextAreaController = new TextAreaController()
caretPosition8+
caretPosition(value: number): void
设置输入光标的位置。
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
value | number | 是 | 从字符串开始到光标所在位置的字符长度。 |
示例
// xxx.ets
@Entry
@Component
struct TextAreaExample {
@State text: string = ''
controller: TextAreaController = new TextAreaController()
build() {
Column() {
TextArea({
placeholder: 'The text area can hold an unlimited amount of text. input your word...',
controller: this.controller
})
.placeholderFont({ size: 16, weight: 400 })
.width(336)
.height(56)
.margin(20)
.fontSize(16)
.fontColor('#182431')
.backgroundColor('#FFFFFF')
.onChange((value: string) => {
this.text = value
})
Text(this.text)
Button('Set caretPosition 1')
.backgroundColor('#007DFF')
.margin(15)
.onClick(() => {
// 设置光标位置到第一个字符后
this.controller.caretPosition(1)
})
}.width('100%').height('100%').backgroundColor('#F1F3F5')
}
}
TextClock
更新时间: 2023-02-17 09:19
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
更新时间: 2023-03-03 17:21
单行文本输入框组件。
说明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件
无
接口
TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})
参数：
参数名 | 参数类型 | 必填 | 参数描述 |
placeholder | 否 | 设置无输入时的提示文本。 | |
text | 否 | 设置输入框当前的文本内容。 | |
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时，当前TextArea中的文字无法被复制或剪切，仅支持粘贴。 | |
showPasswordIcon9+ | boolean | 密码输入模式时，输入框末尾的图标是否显示。 默认值：true |
style9+ | TextInputStyle | 设置输入框为默认风格或内联输入风格。 默认值：TextInputStyle.Default |
textAlign9+ | 设置输入文本在输入框中的对齐方式。 默认值：TextAlign.Start |
EnterKeyType枚举说明
名称 | 描述 |
Go | 显示为前往样式。 |
Search | 显示为搜索样式。 |
Send | 显示为发送样式。 |
Next | 显示为下一个样式。 |
Done | 显示为确认样式。 |
InputType枚举说明
名称 | 描述 |
Normal | 基本输入模式。 支持输入数字、字母、下划线、空格、特殊字符。 |
Password | 密码输入模式。 |
邮箱地址输入模式。 | |
Number | 纯数字输入模式。 |
PhoneNumber9+ | 电话号码输入模式。 支持输入数字、+ 、-、*、#，长度不限。 |
TextInputStyle9+枚举说明
名称 | 描述 |
Default | 默认风格，光标宽1.5vp，光标高度与文本选中底板高度和字体大小相关。 |
Inline | 内联输入风格。文本选中底板高度与输入框高度相同。 |
事件
除支持通用事件外，还支持以下事件：
名称 | 功能描述 |
onChange(callback: (value: string) => void) | 输入内容发生变化时，触发该回调。 value：输入的文本内容。 |
onSubmit(callback: (enterKey: EnterKeyType) => void) | 按下输入法回车键触发该回调，返回值为当前输入法回车键的类型。 enterKeyType：输入法回车键类型。具体类型见EnterKeyType枚举说明。 |
onEditChanged(callback: (isEditing: boolean) => void)(deprecated) | 输入状态变化时，触发该回调。从API 8开始，建议使用onEditChange。 |
onEditChange(callback: (isEditing: boolean) => void)8+ | 输入状态变化时，触发该回调。isEditing为true表示正在输入。 |
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({ 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%')
}
}
赞
收藏
回复
相关推荐
