鸿蒙HarmonyOS NEXT开发:TextArea(基础组件)

120 篇文章 0 订阅

TextArea

多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。

高度未设置时,组件无默认高度,自适应内容高度。宽度未设置时,默认撑满最大宽度。

说明:

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

子组件

接口

TextArea(value?: TextAreaOptions)

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

参数:

参数名类型必填说明
valueTextAreaOptionsTextArea组件参数。

TextAreaOptions对象说明

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

参数名参数类型必填参数描述
placeholderResourceStr设置无输入时的提示文本。输入内容后,提示文本不显示。
仅设置placeholder属性时,手柄依然跟随拖动,手柄松开后光标停留在文字开头位置。
textResourceStr设置输入框当前的文本内容。
建议通过onChange事件将状态变量与文本实时绑定,
避免组件刷新时TextArea中的文本内容异常。
从API version 10开始,该参数支持$$双向绑定变量。
controller8+TextAreaController设置TextArea控制器。

属性

除支持通用属性文本通用属性的fontColor、fontSize、fontStyle、fontWeight、fontFamily外,还支持以下属性:

placeholderColor

placeholderColor(value: ResourceColor)

设置placeholder文本颜色。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueResourceColorplaceholder文本颜色。
默认值:跟随主题。

placeholderFont

placeholderFont(value: Font)

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

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueFontplaceholder文本样式。

textAlign

textAlign(value: TextAlign)

设置文本在输入框中的水平对齐方式。

支持TextAlign.Start、TextAlign.Center和TextAlign.End。

可通过align属性控制文本段落在垂直方向上的位置,此组件中不可通过align属性控制文本段落在水平方向上的位置,即align属性中Alignment.TopStart、Alignment.Top、Alignment.TopEnd效果相同,控制内容在顶部,Alignment.Start、Alignment.Center、Alignment.End效果相同,控制内容垂直居中,Alignment.BottomStart、Alignment.Bottom、Alignment.BottomEnd效果相同,控制内容在底部。

当textAlign属性设置为TextAlign.JUSTIFY时,最后一行文本不参与两端对齐,为水平对齐首部效果。

从API version 11开始,textAlign可设置TextAlign.JUSTIFY

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueTextAlign文本在输入框中的水平对齐方式。
默认值:TextAlign.Start

caretColor

caretColor(value: ResourceColor)

设置输入框光标颜色。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueResourceColor输入框光标颜色。
默认值:‘#007DFF’

说明:
从API version 12开始,此接口支持设置文本手柄颜色,光标和文本手柄颜色保持一致。

inputFilter8+

inputFilter(value: ResourceStr, error?: (value: string) => void)

通过正则表达式设置输入过滤器。匹配表达式的输入允许显示,不匹配的输入将被过滤。仅支持单个字符匹配,不支持字符串匹配。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueResourceStr正则表达式。
error(value: string) => void正则匹配失败时,返回被过滤的内容。

copyOption9+

copyOption(value: CopyOptions)

设置输入的文本是否可复制。设置CopyOptions.None时,当前TextArea中的文字无法被复制或剪切,仅支持粘贴。

copyOption对于拖拽,只限制是否选中,不涉及拖拽范围。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueCopyOptions输入的文本是否可复制。
默认值:CopyOptions.LocalDevice,支持设备内复制。

maxLength10+

maxLength(value: number)

设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制,将无法继续输入字符,同时边框变为红色。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valuenumber文本的最大输入字符数。

showCounter10+

showCounter(value: boolean, options?: InputCounterOptions)

设置当通过InputCounterOptions输入的字符数超过阈值时显示计数器。

参数value为true时,才能设置options,文本框开启计数下标功能,需要配合maxlength(设置最大字符限制)一起使用。字符计数器显示的效果是当前输入字符数/最大可输入字符数。

当输入字符数大于最大字符数乘百分比值时,显示字符计数器。如果用户设置计数器时不设置InputCounterOptions,那么当前输入字符数达到最大字符数时,边框和计数器下标将变为红色。用户同时设置参数value为true和InputCounterOptions,当thresholdPercentage数值在有效区间内,且输入字符数超过最大字符数时,边框和计数器下标将变为红色,框体抖动。highlightBorder设置为false,则不显示红色边框,计数器默认显示红色边框。内联模式下字符计数器不显示。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueboolean是否显示计数器。
options11+InputCounterOptions计数器的百分比。

style10+

style(value: TextContentStyle)

设置文本框多态样式,内联输入风格只支持TextAreaType.Normal类型。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueTextContentStyle文本框多态样式。
默认值:TextContentStyle.DEFAULT

enableKeyboardOnFocus10+

enableKeyboardOnFocus(value: boolean)

设置TextArea通过点击以外的方式获焦时,是否绑定输入法。

从API version 10开始,获焦默认绑定输入法。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueboolean通过点击以外的方式获焦时,是否绑定输入法。
默认值:true

selectionMenuHidden10+

selectionMenuHidden(value: boolean)

设置长按、双击输入框或者右键输入框时,是否不弹出文本选择菜单。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueboolean长按、双击输入框或者右键输入框时,是否不弹出文本选择菜单。
默认值:false

barState10+

barState(value: BarState)

设置输入框编辑态时滚动条的显示模式。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueBarState输入框编辑态时滚动条的显示模式。
默认值:BarState.Auto

maxLines10+

maxLines(value: number)

设置内联输入风格编辑态和非内联模式下文本可显示的最大行数。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valuenumber内联输入风格编辑态时文本可显示的最大行数。
默认值:3,非内联模式下,默认值为+∞,不限制最大行数。
取值范围:(0, +∞)

customKeyboard10+

customKeyboard(value: CustomBuilder, options?: KeyboardOptions)

设置自定义键盘。

当设置自定义键盘时,输入框激活后不会打开系统输入法,而是加载指定的自定义组件。

自定义键盘的高度可以通过自定义组件根节点的height属性设置,宽度不可设置,使用系统默认值。

自定义键盘采用覆盖原始界面的方式呈现,不会对应用原始界面产生压缩或者上提。

自定义键盘无法获取焦点,但是会拦截手势事件。

默认在输入控件失去焦点时,关闭自定义键盘,开发者也可以通过TextAreaController.stopEditing方法控制键盘关闭。

如果设备支持拍摄输入,设置自定义键盘后,该输入框会不支持拍摄输入。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueCustomBuilder自定义键盘。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
options12+KeyboardOptions设置自定义键盘是否支持避让功能。

type11+

type(value: TextAreaType)

设置输入框类型。

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueTextAreaType输入框类型。
默认值:TextAreaType.Normal

enableAutoFill12+

enableAutoFill(value: boolean)

设置是否启用自动填充。

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueboolean是否启用自动填充。
true表示启用,false表示不启用。
默认值:true

contentType12+

contentType(contentType: ContentType)

设置自动填充类型。

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
contentTypeContentType自动填充类型。

enterKeyType11+

enterKeyType(value: EnterKeyType)

设置输入法回车键类型。

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valueEnterKeyType输入法回车键类型。
默认值:EnterKeyType.NEW_LINE

lineHeight12+

lineHeight(value: number | string | Resource)

设置文本的文本行高,设置值不大于0时,不限制文本行高,自适应字体大小,number类型时单位为fp。

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

参数:

参数名类型必填说明
valuenumber | string | Resource文本的文本行高。

decoration12+

decoration(value: TextDecorationOptions)

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

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

参数:

参数名类型必填说明
valueTextDecorationOptions文本装饰线对象。
默认值:{
 type: TextDecorationType.None,
 color: Color.Black,
 style: TextDecorationStyle.SOLID 
}

letterSpacing12+

letterSpacing(value: number | string | Resource)

设置文本字符间距。设置该值为百分比时,按默认值显示。设置该值为0时,按默认值显示。

当取值为负值时,文字会发生压缩,负值过小时会将组件内容区大小压缩为0,导致无内容显示。

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

参数:

参数名类型必填说明
valuenumber | string | Resource文本字符间距。

fontFeature12+

fontFeature(value: string)

设置文字特性效果,比如数字等宽的特性。

格式为:normal | <feature-tag-value>

<feature-tag-value>的格式为:<string> [ <integer> | on | off ]

<feature-tag-value>的个数可以有多个,中间用’,'隔开。

例如,使用等宽数字的输入格式为:“ss01” on。

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

参数:

参数名类型必填说明
valuestring文字特性效果。

设置 Font Feature 属性,Font Feature 是 OpenType 字体的高级排版能力,如支持连字、数字等宽等特性,一般用在自定义字体中,其能力需要字体本身支持。 更多 Font Feature 能力介绍可参考 https://www.w3.org/TR/css-fonts-3/#font-feature-settings-prop 和 https://sparanoid.com/lab/opentype-features/

wordBreak12+

wordBreak(value: WordBreak)

设置文本断行规则。该属性对placeholder文本无效。

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

参数:

参数名类型必填说明
valueWordBreak文本断行规则。
默认值:WordBreak.BREAK_WORD

说明:

组件不支持clip属性设置,设置该属性任意枚举值对组件文本截断无影响。

selectedBackgroundColor12+

selectedBackgroundColor(value: ResourceColor)

设置文本选中底板颜色。如果未设置不透明度,默认为20%不透明度。

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

参数:

参数名类型必填说明
valueResourceColor文本选中底板颜色。
默认为20%不透明度。

caretStyle12+

caretStyle(value: CaretStyle)

设置光标风格。

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

参数:

参数名类型必填说明
valueCaretStyle光标的风格。

textIndent12+

textIndent(value: Dimension)

设置首行文本缩进。

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

参数:

参数名类型必填说明
valueDimension首行文本缩进。
默认值:0

textOverflow12+

textOverflow(value: TextOverflow)

设置文本超长时的显示方式。在非内联模式、内联模式下支持

文本截断是按字截断。例如,英文以单词为最小单位进行截断,若需要以字母为单位进行截断,wordBreak属性可设置为WordBreak.BREAK_ALL。

当overflow设置为TextOverflow.None、TextOverflow.Clip、TextOverflow.Ellipsis时,需配合maxLines使用,单独设置不生效。设置TextOverflow.None与TextOverflow.Clip效果一样。

卡片能力: 该接口支持在ArkTS卡片中使用。

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

参数:

参数名类型必填说明
valueTextOverflow文本超长时的显示方式。
默认值:TextOverflow.Clip

说明:
TextArea组件不支持设置TextOverflow.MARQUEE模式,当设置为TextOverflow.MARQUEE模式时 显示为TextOverflow.Clip

minFontSize12+

minFontSize(value: number | string | Resource)

设置文本最小显示字号。

需配合maxFontSize以及maxLines或布局大小限制使用,单独设置不生效。

自适应字号生效时,fontSize设置不生效。

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

参数:

参数名类型必填说明
valuenumber | string | Resource文本最小显示字号。

maxFontSize12+

maxFontSize(value: number | string | Resource)

设置文本最大显示字号。

需配合minFontSize以及maxLines或布局大小限制使用,单独设置不生效。

自适应字号生效时,fontSize设置不生效。

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

参数:

参数名类型必填说明
valuenumber | string | Resource文本最大显示字号。

heightAdaptivePolicy12+

heightAdaptivePolicy(value: TextHeightAdaptivePolicy)

设置文本自适应高度的方式。

当设置为TextHeightAdaptivePolicy.MAX_LINES_FIRST时,优先使用maxLines属性来调整文本高度。如果使用maxLines属性的布局大小超过了布局约束,则尝试在minFontSizemaxFontSize的范围内缩小字体以显示更多文本。 组件设置为内联输入风格,编辑态与非编辑态存在字体大小不一致情况。

当设置为TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST时,优先使用minFontSize属性来调整文本高度。如果使用minFontSize属性可以将文本布局在一行中,则尝试在minFontSize和maxFontSize的范围内增大字体并使用最大可能的字体大小。

当设置为TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST时,优先使用布局约束来调整文本高度。如果布局大小超过布局约束,则尝试在minFontSize和maxFontSize的范围内缩小字体以满足布局约束。

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

参数:

参数名类型必填说明
valueTextHeightAdaptivePolicy文本自适应高度的方式。
默认值:TextHeightAdaptivePolicy.MAX_LINES_FIRST

lineSpacing12+

lineSpacing(value: LengthMetrics)

设置文本的行间距,设置值不大于0时,取默认值0。

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

参数:

参数名类型必填说明
valueLengthMetrics文本的行间距。默认值:0

lineBreakStrategy12+

lineBreakStrategy(strategy: LineBreakStrategy)

设置折行规则。该属性在wordBreak不等于breakAll的时候生效,不支持连词符。

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
strategyLineBreakStrategy文本的折行规则。
默认值:LineBreakStrategy.GREEDY

说明:

通用属性padding的默认值为:
{
 top: ‘8vp’,
 right: ‘16vp’,
 bottom: ‘8vp’,
 left: ‘16vp’
}

从API version 11开始,多行输入框可设置.width(‘auto’)使组件宽度自适应文本宽度,自适应时组件宽度受constraintSize属性以及父容器传递的最大最小宽度限制,其余使用方式参考尺寸设置

事件

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

onChange

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

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

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valuestring当前输入的文本内容。

onEditChange10+

onEditChange(callback: (isEditing: boolean) => void)

输入状态变化时,触发该回调。有光标时为编辑态,无光标时为非编辑态。isEditing为true表示正在输入。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
isEditingboolean为true表示正在输入。

onCopy8+

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

长按输入框内部区域弹出剪贴板后,点击剪切板复制按钮,触发该回调。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valuestring复制的文本内容。

onCut8+

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

长按输入框内部区域弹出剪贴板后,点击剪切板剪切按钮,触发该回调。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valuestring剪切的文本内容。

onPaste

onPaste(callback:(value: string, event: PasteEvent) => void)

长按输入框内部区域弹出剪贴板后,点击剪切板粘贴按钮,触发该回调。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
valuestring粘贴的文本内容。
event11+PasteEvent用户自定义的粘贴事件。

onTextSelectionChange10+

onTextSelectionChange(callback: (selectionStart: number, selectionEnd: number) => void)

文本选择的位置发生变化时,触发该回调。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
selectionStartnumber所选文本的起始位置,文字的起始位置为0。
selectionEndnumber所选文本的结束位置。

onContentScroll10+

onContentScroll(callback: (totalOffsetX: number, totalOffsetY: number) => void)

文本内容滚动时,触发该回调。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
totalOffsetXnumber文本在内容区的横坐标偏移,单位px。
totalOffsetYnumber文本在内容区的纵坐标偏移,单位px。

onSubmit11+

onSubmit(callback: (enterKey: EnterKeyType) => void)

按下输入法回车键触发该回调。

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

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

参数:

参数名类型必填说明
enterKeyEnterKeyType输入法回车键类型,类型为EnterKeyType.NEW_LINE时不触发onSubmit。

TextAreaController8+

TextArea组件的控制器继承自TextContentControllerBase

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

导入对象

controller: TextAreaController = new TextAreaController()

caretPosition8+

caretPosition(value: number): void

设置输入光标的位置。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

参数:

参数名参数类型必填参数描述
valuenumber从字符串开始到光标所在位置的字符长度。

setTextSelection10+

setTextSelection(selectionStart: number, selectionEnd: number, options?: SelectionOptions): void

组件在获焦状态下,调用该接口设置文本选择区域并高亮显示,且只有在selectionStart小于selectionEnd时,文字才会被选取、高亮显示。

参数:

参数名参数类型必填参数描述
selectionStartnumber文本选择区域起始位置,文本框中文字的起始位置为0。
当selectionStart小于0时、按照0处理;当selectionStart大于文字最大长度时、按照文字最大长度处理。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
selectionEndnumber文本选择区域结束位置。
当selectionEnd小于0时、按照0处理;当selectionEnd大于文字最大长度时、按照文字最大长度处理。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
options12+SelectionOptions选中文字时的配置。
默认值:MenuPolicy.DEFAULT
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

说明:

如果selectionMenuHidden被赋值为true或设备为2in1时,即使options被赋值为MenuPolicy.SHOW,调用setTextSelection也不弹出菜单。

如果选中的文本含有emoji表情时,表情的起始位置包含在设置的文本选中区域内就会被选中。

stopEditing10+

stopEditing(): void

退出编辑态。

原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

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

TextDecorationOptions12+对象说明

名称参数类型必填描述
typeTextDecorationType设置文本装饰线样式。
color ResourceColor设置文本装饰线颜色。
styleTextDecorationStyle设置文本装饰线样式。

TextAreaType11+枚举说明

名称描述
NORMAL0基本输入模式。
支持输入数字、字母、下划线、空格、特殊字符。
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
NUMBER2纯数字输入模式。
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
PHONE_NUMBER3电话号码输入模式。
支持输入数字、空格、+ 、-、*、#、(、),长度不限。
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
EMAIL5邮箱地址输入模式。
支持数字,字母,下划线、小数点、!、#、$、%、&、'、*、+、-、/、=、?、^、`、{、|、}、~,以及@字符(只能存在一个@字符)。
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
NUMBER_DECIMAL12+12带小数点的数字输入模式。
支持数字,小数点(只能存在一个小数点)。

ContentType12+枚举说明

自动填充类型。

名称描述
USER_NAME0【用户名】在已启用密码保险箱的情况下,支持用户名的自动保存和自动填充。
PASSWORD1【密码】在已启用密码保险箱的情况下,支持密码的自动保存和自动填充。
NEW_PASSWORD2【新密码】在已启用密码保险箱的情况下,支持自动生成新密码。
FULL_STREET_ADDRESS3【详细地址】在已启用情景化自动填充的情况下,支持详细地址的自动保存和自动填充。
HOUSE_NUMBER4【门牌号】在已启用情景化自动填充的情况下,支持门牌号的自动保存和自动填充。
DISTRICT_ADDRESS5【区/县】在已启用情景化自动填充的情况下,支持区/县的自动保存和自动填充。
CITY_ADDRESS6【市】在已启用情景化自动填充的情况下,支持市的自动保存和自动填充。
PROVINCE_ADDRESS7【省】在已启用情景化自动填充的情况下,支持省的自动保存和自动填充。
COUNTRY_ADDRESS8【国家】在已启用情景化自动填充的情况下,支持国家的自动保存和自动填充。
PERSON_FULL_NAME9【姓名】在已启用情景化自动填充的情况下,支持姓名的自动保存和自动填充。
PERSON_LAST_NAME10【姓氏】在已启用情景化自动填充的情况下,支持姓氏的自动保存和自动填充。
PERSON_FIRST_NAME11【名字】在已启用情景化自动填充的情况下,支持名字的自动保存和自动填充。
PHONE_NUMBER12【手机号码】在已启用情景化自动填充的情况下,支持手机号码的自动保存和自动填充。
PHONE_COUNTRY_CODE13【国家代码】在已启用情景化自动填充的情况下,支持国家代码的自动保存和自动填充。
FULL_PHONE_NUMBER14【包含国家代码的手机号码】在已启用情景化自动填充的情况下,支持包含国家代码的手机号码的自动保存和自动填充。
EMAIL_ADDRESS15【邮箱地址】在已启用情景化自动填充的情况下,支持邮箱地址的自动保存和自动填充。
BANK_CARD_NUMBER16【银行卡号】在已启用情景化自动填充的情况下,支持银行卡号的自动保存和自动填充。
ID_CARD_NUMBER17【身份证号】在已启用情景化自动填充的情况下,支持身份证号的自动保存和自动填充。
NICKNAME23【昵称】在已启用情景化自动填充的情况下,支持昵称的自动保存和自动填充。
DETAIL_INFO_WITHOUT_STREET24【无街道地址】在已启用情景化自动填充的情况下,支持无街道地址的自动保存和自动填充。
FORMAT_ADDRESS25【标准地址】在已启用情景化自动填充的情况下,支持标准地址的自动保存和自动填充。

SelectionOptions12+

setTextSelection选中文字时的配置。

名称类型必填说明
menuPolicyMenuPolicy菜单弹出的策略。

KeyboardOptions12+

设置自定义键盘是否支持避让功能。

名称类型必填描述
supportAvoidanceboolean设置自定义键盘是否支持避让功能;默认值为false不支持避让,true为支持避让。

示例

示例1

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  @State text: string = ''
  @State positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
  controller: TextAreaController = new TextAreaController()

  build() {
    Column() {
      TextArea({
        text: this.text,
        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)
        })
      Button('Get CaretOffset')
        .backgroundColor('#007DFF')
        .margin(15)
        .onClick(() => {
          this.positionInfo = this.controller.getCaretOffset()
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}
ts

示例2

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  @State text: string = 'test'
  @State counterVisible: boolean = false
  @State maxNumber: number = -1
  controller: TextAreaController = new TextAreaController()

  build() {
    Column() {
      TextArea({
        text: this.text,
        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')
        .maxLength(4)
        .showCounter(true)
        .backgroundColor('#FFFFFF')
        .onChange((value: string) => {
          this.text = value
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}
ts

示例3

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  controller: TextAreaController = new TextAreaController()
  @State inputValue: string = ""

  // 自定义键盘组件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Button('x').onClick(() => {
        // 关闭自定义键盘
        this.controller.stopEditing()
      })
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.inputValue += item
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      TextArea({ controller: this.controller, text: this.inputValue})
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder()).margin(10).border({ width: 1 })
        .height(200)
    }
  }
}
ts

示例4

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  @State text: string = ''
  controller: TextAreaController = new TextAreaController()

  build() {
    Column() {
      TextArea({ text: this.text, controller: this.controller })
        .placeholderFont({ size: 16, weight: 400 })
        .width(336)
        .height(56)
        .maxLength(6)
		.showCounter(true, { thresholdPercentage: 50, highlightBorder: true })
		//计数器显示效果为用户当前输入字符数/最大字符限制数。最大字符限制数通过maxLength()接口设置。
        //如果用户当前输入字符数达到最大字符限制乘50%(thresholdPercentage)。字符计数器显示。
        //用户设置highlightBorder为false时,配置取消红色边框。不设置此参数时,默认为true。
        .onChange((value: string) => {
          this.text = value
        })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}
ts

示例5

// xxx.ets
@Entry
@Component
struct TextInputExample {
  @State Text: string = ''
  @State enterTypes: Array<EnterKeyType> = [EnterKeyType.Go, EnterKeyType.Search, EnterKeyType.Send, EnterKeyType.Done, EnterKeyType.Next, EnterKeyType.PREVIOUS, EnterKeyType.NEW_LINE]
  @State index: number = 0
  build() {
    Column({ space: 20 }) {
      TextArea({ placeholder: '请输入用户名', text: this.Text })
        .width(380)
        .enterKeyType(this.enterTypes[this.index])
        .onChange((value: string) => {
          this.Text = value
        })
        .onSubmit((enterKey: EnterKeyType) => {
          console.log("trigger area onsubmit" + enterKey);
        })
      Button('改变EnterKeyType').onClick(() => {
        this.index = (this.index + 1) % this.enterTypes.length;
      })

    }.width('100%')
  }
}
ts

示例6

示例展示设置不同wordBreak属性的TextArea样式。

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  build() {
    Column() {
      Text("属性WordBreakType为NORMAL的样式:").fontSize(16).fontColor(0xFF0000)
      TextArea({
        text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'
      })
        .fontSize(16)
        .border({ width: 1 })
        .wordBreak(WordBreak.NORMAL)
      Text("英文文本,属性WordBreakType为BREAK_ALL的样式:").fontSize(16).fontColor(0xFF0000)
      TextArea({
        text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'
      })
        .fontSize(16)
        .border({ width: 1 })
        .wordBreak(WordBreak.BREAK_ALL)
      Text("中文文本,属性WordBreakType为BREAK_ALL的样式:").fontSize(16).fontColor(0xFF0000)
      TextArea({
        text: '多行文本输入框组件,当输入的文本内容超过组件宽度时会自动换行显示。\n高度未设置时,组件无默认高度,自适应内容高度。宽度未设置时,默认撑满最大宽度。'
      })
        .fontSize(16)
        .border({ width: 1 })
        .wordBreak(WordBreak.BREAK_ALL)
      Text("属性WordBreakType为BREAK_WORD的样式:").fontSize(16).fontColor(0xFF0000)
      TextArea({
        text: 'This is set wordBreak to WordBreak text Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu.'
      })
        .fontSize(16)
        .border({ width: 1 })
        .wordBreak(WordBreak.BREAK_WORD)
    }
  }
}
ts

示例7

该示例实现了使用lineHeight设置文本的文本行高,使用letterSpacing设置文本字符间距,使用decoration设置文本装饰线样式。

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  build() {
    Row() {
      Column() {
        Text('lineHeight').fontSize(9).fontColor(0xCCCCCC)
        TextArea({text: 'lineHeight unset'})
          .border({ width: 1 }).padding(10).margin(5)
        TextArea({text: 'lineHeight 15'})
          .border({ width: 1 }).padding(10).margin(5).lineHeight(15)
        TextArea({text: 'lineHeight 30'})
          .border({ width: 1 }).padding(10).margin(5).lineHeight(30)

        Text('letterSpacing').fontSize(9).fontColor(0xCCCCCC)
        TextArea({text: 'letterSpacing 0'})
          .border({ width: 1 }).padding(5).margin(5).letterSpacing(0)
        TextArea({text: 'letterSpacing 3'})
          .border({ width: 1 }).padding(5).margin(5).letterSpacing(3)
        TextArea({text: 'letterSpacing -1'})
          .border({ width: 1 }).padding(5).margin(5).letterSpacing(-1)

        Text('decoration').fontSize(9).fontColor(0xCCCCCC)
        TextArea({text: 'LineThrough, Red\nsecond line'})
          .border({ width: 1 }).padding(5).margin(5)
          .decoration({type: TextDecorationType.LineThrough, color: Color.Red})
        TextArea({text: 'Overline, Red, DOTTED\nsecond line'})
          .border({ width: 1 }).padding(5).margin(5)
          .decoration({type: TextDecorationType.Overline, color: Color.Red, style: TextDecorationStyle.DOTTED})
        TextArea({text: 'Underline, Red, WAVY\nsecond line'})
          .border({ width: 1 }).padding(5).margin(5)
          .decoration({type: TextDecorationType.Underline, color: Color.Red, style: TextDecorationStyle.WAVY})
      }.height('90%')
    }
    .width('90%')
    .margin(10)
  }
}
ts

示例8

fontFeature属性使用示例,对比了fontFeature使用ss01属性和不使用ss01属性的效果。

@Entry
@Component
struct textArea {
  @State text1: string = 'This is ss01 on : 0123456789'
  @State text2: string = 'This is ss01 off: 0123456789'

  build() {
    Column(){
      TextArea({text: this.text1})
        .fontSize(20)
        .margin({top:200})
        .fontFeature("\"ss01\" on")
      TextArea({text : this.text2})
        .margin({top:10})
        .fontSize(20)
        .fontFeature("\"ss01\" off")
    }
    .width("90%")
    .margin("5%")
  }
}
ts

示例9

自定义键盘弹出发生避让示例

@Entry
@Component
struct TextAreaExample {
  controller: TextAreaController = new TextAreaController()
  @State inputValue: string = ""
  @State height1:string|number = '80%'
  @State height2:number = 100
  @State supportAvoidance:boolean = true;

  // 自定义键盘组件
  @Builder CustomKeyboardBuilder() {
    Column() {
      Row(){
        Button('x').onClick(() => {
          // 关闭自定义键盘
          this.controller.stopEditing()
        }).margin(10)
      }
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.inputValue += item
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      Row(){
        Button("20%")
          .fontSize(24)
          .onClick(()=>{
            this.height1 = "20%"
          })
        Button("80%")
          .fontSize(24)
          .margin({left:20})
          .onClick(()=>{
            this.height1 = "80%"
          })
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Bottom)
      .height(this.height1)
      .width("100%")
      .padding({bottom:50})
      TextArea({ controller: this.controller, text: this.inputValue})
        .height(100)
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder(),{ supportAvoidance: this.supportAvoidance }).margin(10).border({ width: 1 })
        // .height(200)
    }
  }
}
ts

示例10

该示例实现了使用minFontSize,maxFontSize及heightAdaptivePolicy设置文本自适应字号。

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  build() {
    Row() {
      Column() {
        Text('heightAdaptivePolicy').fontSize(9).fontColor(0xCCCCCC)
        TextArea({text: 'This is the text with the height adaptive policy set'})
          .width('80%').height(90).borderWidth(1).margin(1)
          .minFontSize(4)
          .maxFontSize(40)
          .maxLines(3)
          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
        TextArea({text: 'This is the text with the height adaptive policy set'})
          .width('80%').height(90).borderWidth(1).margin(1)
          .minFontSize(4)
          .maxFontSize(40)
          .maxLines(3)
          .heightAdaptivePolicy(TextHeightAdaptivePolicy.MIN_FONT_SIZE_FIRST)
        TextArea({text: 'This is the text with the height adaptive policy set'})
          .width('80%').height(90).borderWidth(1).margin(1)
          .minFontSize(4)
          .maxFontSize(40)
          .maxLines(3)
          .heightAdaptivePolicy(TextHeightAdaptivePolicy.LAYOUT_CONSTRAINT_FIRST)
      }.height('90%')
    }
    .width('90%')
    .margin(10)
  }
}
ts

示例11

lineSpacing使用示例,对比了不设置lineSpacing与lineSpacing设置不同单位的效果。

import { LengthMetrics } from '@ohos.arkui.node'

@Entry
@Component
struct LineSpacingExample {
  build() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) {
        Text('TextArea lineSpacing.').fontSize(9).fontColor(0xCCCCCC)
        TextArea({ placeholder: 'This is the TextArea with no lineSpacing set.' })
          .fontSize(12)
        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_px.' })
          .fontSize(12)
          .lineSpacing(LengthMetrics.px(20))
        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_vp.' })
          .fontSize(12)
          .lineSpacing(LengthMetrics.vp(20))
        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_fp.' })
          .fontSize(12)
          .lineSpacing(LengthMetrics.fp(20))
        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 20_lpx.' })
          .fontSize(12)
          .lineSpacing(LengthMetrics.lpx(20))
        TextArea({ placeholder: 'This is the TextArea with lineSpacing set to 100%.' })
          .fontSize(12)
          .lineSpacing(LengthMetrics.percent(1))
      }.height(600).width(350).padding({ left: 35, right: 35, top: 35 })
  }
}
ts

示例12

自动填充示例

// xxx.ets
@Entry
@Component
struct TextAreaExample {
  @State text: string = ''

  build() {
    Column() {
      // 邮箱地址自动填充类型
      TextArea({ placeholder: 'input your email...' })
        .width('95%')
        .height(40)
        .margin(20)
        .contentType(ContentType.EMAIL_ADDRESS)
        .enableAutoFill(true)
        .maxLength(20)
      // 街道地址自动填充类型
      TextArea({ placeholder: 'input your street address...' })
        .width('95%')
        .height(40)
        .margin(20)
        .contentType(ContentType.FULL_STREET_ADDRESS)
        .enableAutoFill(true)
        .maxLength(20)
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}
ts

示例13

lineBreakStrategy使用示例,对比了不设置lineBreakStrategy与lineBreakStrategy设置不同挡位的效果。

@Entry
@Component
struct TextExample1 {
  @State message1: string = "They can be classified as built-in components–those directly provided by the ArkUI framework and custom components – those defined by developers" +
    "The built-in components include buttons radio buttonsprogress indicators and text You can set the rendering effectof thesecomponents in method chaining mode," +
    "page components are divided into independent UI units to implementindependent creation development and reuse of different units on pages making pages more engineering-oriented.";

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start }) {
      Text('LineBreakStrategy.GREEDY').fontSize(9).fontColor(0xCCCCCC).width('90%').padding(10)
      TextArea({text: this.message1})
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .lineBreakStrategy(LineBreakStrategy.GREEDY)
      Text('LineBreakStrategy.HIGH_QUALITY').fontSize(9).fontColor(0xCCCCCC).width('90%').padding(10)
      TextArea({text: this.message1})
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .lineBreakStrategy(LineBreakStrategy.HIGH_QUALITY)
      Text('LineBreakStrategy.BALANCED').fontSize(9).fontColor(0xCCCCCC).width('90%').padding(10)
      TextArea({text: this.message1})
        .fontSize(12)
        .border({ width: 1 })
        .padding(10)
        .width('100%')
        .lineBreakStrategy(LineBreakStrategy.BALANCED)
    }.height(700).width(370).padding({ left: 35, right: 35, top: 35 })
  }
}
ts

看完三件事❤️

  • 如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力。
  • 关注作者公众皓 『 蜀道衫 』,不定期分享原创知识。
  • 关注后回复【666】扫码即可获取学习资料包。
  • 同时可以期待后续文章ing🚀。

  • 9
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值