文本输入（TextInput/TextArea）

说明：

当前为Beta阶段。

TextInput、TextArea是输入框组件，通常用于响应用户的输入操作，比如评论区的输入、聊天框的输入、表格的输入等，也可以结合其它组件构建功能页面，例如登录注册页面。具体用法请参见TextInput、TextArea。

创建输入框

TextInput为单行输入框、TextArea为多行输入框。通过以下接口来创建。

init(placeholder!: ?ResourceStr = None, text!: ?ResourceStr = None, controller!: ?TextInputController = None)

init(placeholder!: ?ResourceStr = None, text!: ?ResourceStr = None,controller!: ?TextAreaController = None)

• 单行输入框。

  TextInput()
  

  

• 多行输入框。

  TextArea()
  

  

• 多行输入框文字超出一行时会自动折行。

  TextArea(text: "我是TextArea我是TextArea我是TextArea我是TextArea" ).width(300)
  

  

自定义样式

• 设置无输入时的提示文本。

  TextInput(placeholder: '我是提示文本')
  

  

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

  TextInput( placeholder: '我是提示文本', text: '我是当前文本内容' )
  

  

• 添加backgroundColor改变输入框的背景颜色。

  TextInput( placeholder: '我是提示文本', text: '我是当前文本内容' )
  .backgroundColor(0x4D0A59F7)
  

  

  更丰富的样式可以结合通用属性实现。

选中菜单

输入框中的文字被选中时会弹出包含剪切、复制、翻译的菜单。

TextInput:

TextInput( text: '这是一段文本，用来展示选中菜单')

TextArea:

TextArea( text: '这是一段文本，用来展示选中菜单')

键盘避让

键盘抬起后，具有滚动能力的容器组件在横竖屏切换时，才会生效键盘避让，若希望无滚动能力的容器组件也生效键盘避让，建议在组件外嵌套一层具有滚动能力的容器组件，比如Scroll、List、Grid。

package ohos_app_cangjie_entry

import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*

@Entry
@Component
class EntryView {
    var placeHolderArr: Array<String> = ["1", "2", "3", "4", "5", "6", "7"];
    func build() {
        Scroll() {
            Column {
                ForEach(
                    this.placeHolderArr,
                    itemGeneratorFunc: {
                        placeholder: String, _: Int64 => TextInput(placeholder: 'TextInput ' + placeholder).margin(30)
                    }
                )
            }
        }
            .height(100.percent)
            .width(100.percent)
    }
}

常见问题

如何设置TextArea的文本最少展示行数并自适应高度

问题现象

设置TextArea的初始高度来控制最少文本展示行数，当输入文本超过初始高度时，TextArea的高度自适应。

解决措施

设置height为LengthMetrics.AUTO，并使用constraintSize自行计算高度。

package ohos_app_cangjie_entry

import kit.ArkUI.*
import ohos.arkui.state_macro_manage.*

@Entry
@Component
class EntryView {
    let textAreaPadding = 12.0
    let setMaxLines = 3.0
    let changeText = "Add TextArea \n"
    @State var fullText: String = this.changeText
    @State var originText: String = this.changeText

    func build() {
        Column() {
            TextArea(text: 'constraintSize: ' + this.fullText)
            .fontSize(18)
            .padding(this.textAreaPadding)
            .width(300)
            .height(LengthMetrics.AUTO)
            .constraintSize(
                // 结合padding计算，设置至少显示this.setMaxLines行文本
                // 若涉及适老化字号缩放，需要监听并调整高度
                minHeight: (this.textAreaPadding * 2.0 + this.setMaxLines * 21.0)
            )

            Blank(min: 50)
            Button("Input something")
            .onClick({ evt =>
                this.fullText += this.changeText
            })
        }
        .justifyContent(FlexAlign.Center)
        .width(100.percent)
        .padding(top: 30)
    }
}