华为仓颉鸿蒙HarmonyOS NEXT原生UI基础组件TextArea

BisonLiu
202 阅读8分钟

多行文本输入框组件，当输入的文本内容超过组件宽度时会自动换行显示。高度未设置时，组件无默认高度，自适应内容高度。宽度未设置时，默认撑满最大宽度。

说明

TextArea暂不支持混合页面场景。

子组件

无

构造函数

init(String, String, TextAreaController)

public init(placeholder!: String = "", text!: String = "", controller!: TextAreaController = TextAreaController())

创建 TextArea 组件对象。

参数名参数类型必填默认值描述
placeholderString否-设置无输入时的提示文本。输入内容后，提示文本不显示。
textString否-设置输入框当前的文本内容。建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextArea中的文本内容异常。
controllerTextAreaController否TextAreaController()TextArea控制器。

init(CJResource, String, TextAreaController)

public init(placeholder!: CJResource, text!: String = "", controller!: TextAreaController = TextAreaController())

创建 TextArea 组件对象。

参数名参数类型必填默认值描述
placeholderCJResource是-设置无输入时的提示文本。输入内容后，提示文本不显示。
textString否-设置输入框当前的文本内容。建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextArea中的文本内容异常。
controllerTextAreaController否TextAreaController()TextArea控制器。

init(String, CJResource, TextAreaController)

public init(placeholder!: String = "", text!: CJResource, controller!: TextAreaController = TextAreaController())

创建 TextArea 组件对象。

参数名参数类型必填默认值描述
placeholderString否-设置无输入时的提示文本。输入内容后，提示文本不显示。
textCJResource是-设置输入框当前的文本内容。建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextArea中的文本内容异常。
controllerTextAreaController否TextAreaController()TextArea控制器。

init(CJResource, CJResource, TextAreaController)

public init(placeholder!: CJResource, text!: CJResource, controller!: TextAreaController = TextAreaController())

创建 TextArea 组件对象。

参数名参数类型必填默认值描述
placeholderCJResource是-设置无输入时的提示文本。输入内容后，提示文本不显示。
textCJResource是-设置输入框当前的文本内容。建议通过onChange事件将状态变量与文本实时绑定，避免组件刷新时TextArea中的文本内容异常。
controllerTextAreaController否TextAreaController()TextArea 控制器。

函数

除支持通用属性和文本通用属性的fontColor、fontSize、fontStyle、fontWeight、fontFamily外，还支持以下功能：

enterKeyType(EnterKeyType)

public func enterKeyType(value: EnterKeyType): This

设置键盘操作按钮的类型。

参数名参数类型必填默认值描述
valueEnterKeyType是EnterKeyType.NEW_LINE输入法回车键类型。

caretColor(Color)

public func caretColor(value: Color): This

设置输入框光标颜色。

参数名参数类型必填默认值描述
valueColor是#007DFF输入框光标颜色。

caretColor(CJResource)

public func caretColor(value: CJResource): This

设置输入框光标颜色。

参数名参数类型必填默认值描述
valueCJResource是-输入框光标颜色。

caretColor(UInt32)

public func caretColor(value: UInt32): This

设置输入框光标颜色。

参数名参数类型必填默认值描述
valueUInt32是-输入框光标颜色。

placeholderColor(Color)

public func placeholderColor(value: Color): This

设置placeholder文本颜色。

参数名参数类型必填默认值描述
valueColor是跟随主题placeholder文本颜色。

placeholderColor(UInt32)

public func placeholderColor(value: UInt32): This

设置placeholder文本颜色。

参数名参数类型必填默认值描述
valueUInt32是跟随主题placeholder文本颜色。

placeholderFont(Length, FontWeight, String, FontStyle)

public func placeholderFont(size!: Length, weight!: FontWeight = FontWeight.W400, family!: String = "", style!: FontStyle = FontStyle.Normal): This

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

参数名参数类型必填默认值描述
sizeLength是16.0.fp文本尺寸。 使用fp单位。
weightFontWeight否FontWeight.W400文本的字体粗细。
familyString否""文本的字体列表。
styleFontStyle否FontStyle.Normal文本的字体样式。

placeholderFont(Length, FontWeight, String, FontStyle)

public func placeholderFont(size!: Float64, weight!: FontWeight = FontWeight.W400, family!: String = "", style!: FontStyle = FontStyle.Normal): This

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

参数名参数类型必填默认值描述
sizeFloat64是16.0文本尺寸。 使用fp单位。
weightFontWeight否FontWeight.W400文本的字体粗细。
familyString否""文本的字体列表。
styleFontStyle否FontStyle.Normal文本的字体样式。

placeholderFont(Int64, FontWeight, String, FontStyle)

public func placeholderFont(size!: Int64, weight!: FontWeight = FontWeight.W400, family!: String = "", style!: FontStyle = FontStyle.Normal): This

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

参数名参数类型必填默认值描述
sizeInt64是16文本尺寸。使用fp单位。
weightFontWeight否FontWeight.W400文本的字体粗细。
familyString否""文本的字体列表。
styleFontStyle否FontStyle.Normal文本的字体样式。

placeholderFont(CJResource, FontWeight, String, FontStyle)

public func placeholderFont(size!: CJResource, weight!: FontWeight = FontWeight.W400, family!: String = "", style!: FontStyle = FontStyle.Normal): This

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

参数名参数类型必填默认值描述
sizeCJResource是-文本尺寸。
weightFontWeight否FontWeight.W400文本的字体粗细。
familyString否""文本的字体列表。
styleFontStyle否FontStyle.Normal文本的字体样式。

inputFilter(String, (String)-> Unit)

public func inputFilter(value!: String, error!: (String)-> Unit = { value => }): This

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

参数名参数类型必填默认值描述
valueString是-正则表达式。
value(String)-> Unit否{ value => }正则匹配失败时，返回被过滤的内容。

textAlign(TextAlign)

public func textAlign(value: TextAlign): This

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

参数名参数类型必填默认值描述
valueTextAlign是TextAlign.Start水平对齐方式。仅支持TextAlign.Start、TextAlign.Center和TextAlign.End。

自定义类型说明

TextAreaController

TextArea 组件的控制器。

public class TextAreaController {
        public init()
        public func caretPosition(value: Int32): Unit
    }

构造函数

init()

public init()

构造一个 TextAreaController 类型的对象。

函数

caretPosition(Int32)

public func caretPosition(value: Int32): Unit

设置光标位置。

参数名参数类型必填默认值描述
valueInt32是-光标的位置。

事件

除支持通用事件外，还支持以下事件：

onSubmit((EnterKeyType)->Unit)

public func onSubmit(callback: (EnterKeyType)->Unit): This

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

参数名参数类型描述
callback(EnterKeyType)->Unit回车键或者软键盘回车键触发该回调，参数为当前软键盘回车键类型。

onChange((String)->Unit)

public func onChange(callback: (String)->Unit): This

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

触发该事件的条件：

1、键盘输入。

2、粘贴、剪切。

3、键盘快捷键Ctrl+v。

参数名参数类型描述
callback(String)->Unit文本内容改变时触发，返回当前的文本内容。

onCopy((String)->Unit)

public func onCopy(callback: (String)->Unit): This

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

参数名参数类型描述
callback(String)->Unit复制时触发，返回复制的文本内容。

onCut((String)->Unit)

public func onCut(callback: (String)->Unit): This

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

参数名参数类型描述
callback(String)->Unit剪切时触发，返回剪切的文本内容。

onPaste((String)->Unit)

public func onPaste(callback: (String)->Unit): This

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

参数名参数类型描述
callback(String)->Unit粘贴时触发，返回粘贴的文本内容。

onEditChange((Bool)->Unit)

public func onEditChange(callback: (Bool)->Unit): This

输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。

参数名参数类型描述
callback(Bool)->Unit编辑状态改变时触发，返回当前编辑状态。参数为true表示正在输入。

onEditChanged((Bool)->Unit)

public func onEditChanged(callback: (Bool)->Unit): This

输入状态变化时，触发该回调。有光标时为编辑态，无光标时为非编辑态。

参数名参数类型描述
callback(Bool)->Unit编辑状态改变时触发，返回当前编辑状态。参数为true表示正在输入。

通用属性/通用事件

通用属性：全部支持。

通用事件：全部支持。

示例代码

import ohos.base.*
    import ohos.component.*
    import ohos.state_manage.*
    import ohos.state_macro_manage.*
    
    @Entry
    @Component
    class MyView {
        @State var placeholder: String = "please input your name"
        @State var name: String = "AAA"
        var controller: TextAreaController = TextAreaController()
        var scroller: Scroller = Scroller()
        func build() {
            Scroll(this.scroller) {
                Column(10.px){
                    Button("caretposition  3").onClick({
                        evt => controller.caretPosition(3)
                    })
    
                    TextArea(placeholder: this.placeholder, text: this.name, controller: controller)
                    .textAlign(TextAlign.Center)
    
                    TextArea(text: "size")
                    .size(width: 100.vp, height: 50.vp).borderRadius(100.vp)
    
                    TextArea(text: "border")
                    .border(width: 1.vp, color: Color(0XFFFF0011), radius: 5.vp, style: BorderStyle.Dashed )
    
                    TextArea(text: "padding")
                    .padding(40.vp)
    
                    TextArea(text: "font color")
                    .fontColor(0x8A2BE2)
    
                    TextArea(text: "font size 60")
                    .fontSize(60)
    
                    TextArea(text: "font weight 900")
                    .fontWeight(FontWeight.W900)
    
                    TextArea(text: "font style Italic")
                    .fontStyle(FontStyle.Italic)
    
                    TextArea(placeholder: "placeholder font")
                    .placeholderColor(Color(0x8A2BE2))
                    .placeholderFont(size:60.0, weight: FontWeight.W900, family:"Georgia", style:FontStyle.Italic)
    
                    TextArea(placeholder: "textAlign")
                    .textAlign(TextAlign.Start)
    
                    TextArea(placeholder: "caretColor")
                    .caretColor(Color.RED)
    
                    TextArea(placeholder: "inputfilter only a")
                    .inputFilter(value: "a" , error: { val => nativeLog( "TextArea OnError:" + val) })
    
                    TextArea(placeholder: "TextArea callback")
                    .onChange ({ val =>
                    nativeLog("TextArea onChange:" + val)
                    })
                    .onPaste ({ val =>
                        nativeLog("TextArea onPaste:" + val)
                    })
                    .onCut ({ val =>
                        nativeLog("TextArea onCut:" + val)
                    })
                    .onCopy ({ val =>
                        nativeLog("TextArea onCopy:" + val)
                    })
                    .onEditChanged ({ val =>
                        nativeLog("TextArea onEditChanged:" + val.toString())
                    })
                    .onSubmit ({ val =>
                        nativeLog("TextArea onSubmit")
                    })
                }
                .height(100.percent)
                .width(100.percent)
            }
        }
    }

图片

如对您有帮助，帮忙点个“在看 、关注” 让更多的人受益~！

技术交流群可加wx“LB-9191” 备注cangjie

avatar
文章
阅读
粉丝