HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】

简介: HarmonyOS-UIAbitity-TextArea——【坚果派-红目香薰】
摘要

作者:红目香薰

团队:坚果派

团队介绍:坚果派由坚果创建,团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。

TextArea

可以输入多行文本并支持响应部分输入事件的组件。

接口

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

参数:

参数名

参数类型

必填

参数描述

placeholder

ResourceStr

无输入时的提示文本。

text

ResourceStr

设置输入框当前的文本内容。

controller8+

TextAreaController

设置TextArea控制器。

属性

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

名称

参数类型

描述

placeholderColor

ResourceColor

设置placeholder文本颜色。

placeholderFont

Font

设置placeholder文本样式:

- size: 设置文本尺寸,Length为number类型时,使用fp单位。

- weight: 设置文本的字体粗细,number类型取值[100, 900],取值间隔为100,默认为400,取值越大,字体越粗。

- family: 设置文本的字体列表。使用多个字体,使用','进行分割,优先级按顺序生效,例如:'Arial, sans-serif'。

- style: 设置文本的字体样式。

textAlign

TextAlign

设置文本水平对齐方式。

默认值:TextAlign.Start

caretColor

ResourceColor

设置输入框光标颜色。

inputFilter8+

{

value: Resource8+,

error?: (value: string) => void

}

通过正则表达式设置输入过滤器。满足表达式的输入允许显示,不满足的输入被忽略。仅支持单个字符匹配,不支持字符串匹配。例如:^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$,不支持过滤8到10位的强密码。

- value:设置正则表达式。

- error:正则匹配失败时,返回被忽略的内容。

事件

名称

功能描述

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

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

onCopy8+(callback:(value: string) => void)

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

- value:复制的文本内容1。

onCut8+(callback:(value: string) => void)

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

- value:剪切的文本内容。

onPaste8+(callback:(value: string) => void)

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

- value:粘贴的文本内容。

TextAreaController8+

TextArea组件的控制器,通过它操作TextArea组件。

导入对象

controller: TextAreaController = new TextAreaController()

caretPosition8+

caretPosition(value: number): void

设置输入光标的位置。

参数:

参数名

参数类型

必填

参数描述

value

number

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

代码示例:

@Entry

@Component

struct Index {

 controller: TextAreaController = new TextAreaController()

 @State text: string = ''

 build() {

   Column() {

     TextArea({ placeholder: '你要输入的单词', controller: this.controller })

       .placeholderColor("rgb(0,0,225)")

       .placeholderFont({ size: 20, weight: 100, family: 'cursive', style: FontStyle.Italic })

       .textAlign(TextAlign.Center)

       .caretColor(Color.Blue)

       .fontSize(30)

       .fontWeight(FontWeight.Bold)

       .fontFamily("sans-serif")

       .fontStyle(FontStyle.Normal)

       .fontColor(Color.Red)

       .inputFilter('^[\u4E00-\u9FA5A-Za-z0-9_]+$', (value: string) => {

         console.info("显示" + value)

       })

       .onChange((value: string) => {

         this.text = value

         this.controller.caretPosition(-1)

       })

     Text(this.text).width('90%')

   }

 }

}

相关文章
|
9月前
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Text——【坚果派-红目香薰】
81 0
|
9月前
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
HarmonyOS-UIAbitity-StepperItem——【坚果派-红目香薰】
51 0
|
9月前
|
索引
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Stepper——【坚果派-红目香薰】
49 0
|
9月前
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Span——【坚果派-红目香薰】
55 0
|
9月前
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Slider——【坚果派-红目香薰】
55 0
|
9月前
|
索引
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
HarmonyOS-UIAbitity-Select——【坚果派-红目香薰】
55 0
|
9天前
鸿蒙开发:V2版本装饰器@Once
@Once装饰器只能与@Param搭配使用,仅此一个组合,无其他使用方式,还有就是,必须在V2版本,也就是@ComponentV2装饰的自定义组件中,否则会报异常。
鸿蒙开发:V2版本装饰器@Once
|
2天前
|
API 开发者 Windows
uniapp 极速上手鸿蒙开发
uniapp 自版本 `4.28.2024092502` 起支持鸿蒙应用开发,现版本 `4.36.2024112817` 同时支持鸿蒙应用和元服务开发。本文介绍使用 HBuilderX 4.24+ 和 DevEco Studio 进行环境配置、项目创建及运行的详细步骤,涵盖从 AGC 平台新建项目、配置证书到最终运行项目的全流程,帮助开发者快速上手鸿蒙开发。注意:HBuilderX 4.31+ 构建的鸿蒙运行包不支持 x86_64 平台,需使用真机调试。
107 85
uniapp 极速上手鸿蒙开发
|
3天前
鸿蒙开发:wrapBuilder传递参数
本文,主要简单了介绍了一下,非UI使用的情况下,wrapBuilder传递数据问题,除了以上的方式之外,还有其它的方式可以实现,在实际的开发中,还是具体问题具体分析。
74 61
鸿蒙开发:wrapBuilder传递参数
|
1天前
|
存储
鸿蒙开发:自定义一个搜索模版
这样的一个模版,可以简单的分为,三个部分,分别是上边的搜索框,中间的历史搜索和下边的热门搜索,搜索框,我们直接可以使用系统的组件Search,历史搜索,由于是内容不一的搜索的内容,这里使用弹性布局Flex,下边的热门搜索,条目规格一致,这里我们直接使用Grid网格组件。
40 23
鸿蒙开发:自定义一个搜索模版

热门文章

最新文章