鸿蒙组件学习

鸿蒙组件学习_TextInput

说明

该组件从API Version 7 开始支持。

参数:
placeholder     设置无输入时的提示文本
text            设置输入框当前的文本内容
controller      设置TextInput控制器(从API Version 8开始支持)

属性:
type    设置输入框类型
    InputType.Normal    正常
    InputType.Number    纯数字
    PhoneNumber         电话
    Email               邮箱格式
    Possword            密码格式输入
placeholderColor        设置placeholder文本颜色
placeholderFont         设置placeholder文本样式
enterKeyType            设置输入法回车键类型,目前仅支持默认型
caretColor               设置输入框光标颜色
maxLength               设置文本的最大输入字符数
inputFilter             正则表达式,目前仅支持单个字符的匹配(API Version 8 开始支持)
    - value             设置正则表达式
    - error             正则表达式失败时,返回被过滤的内容
copyOption              设置输入的文本是否可复制(API Version 9 开始支持)
showPasswordIcon        密码输入模式时,输入框末尾的图标是否显示。
style                   设置输入框为默认风格或内联输入风格(API Version 9 开始支持)
    TextInputStyle.default  选中文本与字体大小样式有关
    TextInputStyle.inline   选中文本与输入框高度有关
textAlign               设置输入文本在输入框中的对齐方式(API Version 9 开始支持)

回调函数
onChange(输入内容发生变化)
onSubmit(按下回车键触发该回调)
onEditChanged(输入状态变化时,触发该回调)
onCopy  点击剪切板复制按钮  value: 复制的文本内容
onCut   点击剪切板剪切按钮  value: 剪切的文本内容
onPaste 点击剪切板粘贴按钮  value: 粘贴的文本内容

练习

@Entry
@Component
struct TextInput_Test{
  private controller: TextInputController = new TextInputController()
  @State account:string = ''
  @State password:string = ''

  build(){
      Column({space: 10}){
        TextInput({
          placeholder: '账号',
          text: '账号',
          controller: this.controller
        })
          .type(InputType.Normal)
          .margin({top: 20})
          .width('90%')
          .borderWidth(1)
          .placeholderColor(Color.Blue)
          .placeholderFont({size: 20})
          .textAlign(TextAlign.Start)
          .maxLength(11)
          .caretColor(Color.Green)
          .style(TextInputStyle.Default)
          .copyOption(CopyOptions.InApp)
          .inputFilter('a',(str) =>{
            return str
          })
          .onChange((str) => {
            this.account = str
          })
        TextInput({
          placeholder: '密码',
          text: '密码',
          controller: this.controller
        })
          .type(InputType.Password)
          .width('90%')
          .borderWidth(1)
          .placeholderColor('#f00')
          .placeholderFont({size: 20})
          .textAlign(TextAlign.Start)
          .maxLength(11)
          .showPasswordIcon(true)
          .copyOption(CopyOptions.InApp)
          .onChange((str) => {
            this.password = str
          })
        Text(this.account)
          .fontSize(20)
          .fontColor(Color.Brown)
          .width('100%')
          .height(100)
        Text(this.password)
          .fontSize(20)
          .fontColor(Color.Brown)
          .width('100%')
          .height(100)
      }.alignItems(HorizontalAlign.Center)
       .width('100%')
  }
}