引入

为了能够和程序交互, 除了点击各种按钮, 还需要满足用户的个性化需求, 于是就有了输入框, 可以用在搜索栏, 也可以用在输入文本, 也可以用来和服务器通信. 反正输入框就是这么个东西, 是必不可少的一个组件.

这篇文章不再全是代码了, 换一个方式介绍输入框这个控件: 通过实现一个小的功能来介绍如何使用它.

目标

实现一个输入框, 没有输入的时候提示输入密码, 输入内容后, 把上方的提示文本转换为输入的内容. 页面大致样式如下:

输入内容前:
输入内容后:

实现小项目

搭建页面框架

emmm, 其实这也不需要介绍, 直接就是一个Column(还没讲, 我知道, 不过没事, 理解为列就好)里面套两个东西, 一个文本一个输入框而已.

我们先构建上面的文本:

@State inputThings: string = ""

Text(this.inputThings || "输入框")
    .fontSize(50)
    .fontWeight(FontWeight.Bold)

这里使用||, 是TS的一个使用方法, 意思就是, 如果输入的内容, 也就是inputThings为空的话(不是说这个东西为null, 是说没有内容), 那么就会使用后面的值: 输入框. 这样就非常简单的实现了一个来回切换的功能.

当然当然, 由于ArkTS是可以直接使用条件流程控制语句进行渲染的, 你也可以用if进行判断.

输入框

接下来, 就是配置输入框了. 其实配置起来非常的简单, 直接一个TextInput()即可.

TextInput({
    placeholder: "请输入账号或手机号"
})

注意, 这里为了有一个留空的提示, 需要使用的是一个options选择参数, 不是那种链式编程的点式编程.

随后, 我们希望, 输入的是密码, 也就是有一个小眼睛的那种, 所以需要设置输入框的type, 类型为Password. 另外顺手设置一下输入框的大小, 就可以直接得到上面的输入框啦

TextInput({
    placeholder: "请输入账号或手机号"
})
    .width('80%')
    .type(InputType.Password)

接下来, 我们需要实现一个输入内容后, 就修改上面的内容的效果. 上面已经和状态变量inputText绑定完成, 所以我们只需要在这里修改这个状态量就可以了. 那么如何改变, 需要监听什么东西呢?

其实非常的朴实无华, 我们要输入内容, 就会改变内容, 所以就是onChanged方法, 一旦输入的东西发生了改变, 那么就直接赋值即可

.onChange((value) => {
    // onChanged可以传入一个回调函数, 传入的内容直接就是用户输入的内容
    this.inputThings = value
})

好啦, 把代码组合起来, 并且给一点点样式(就是加一个space让组件分开, 给一个宽高剧中), 就得到了上面这个页面的源代码:

@Entry
@Component
struct Index {
  @State inputThings: string = ""
  build() {
    Row() {
      Column({space: 20}) {
        Text(this.inputThings || "输入框")
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        TextInput({
          placeholder: "请输入账号或手机号"
        })
          .width('80%')
          .type(InputType.Password)
          .onChange((value) => {
            this.inputThings = value
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

细谈

上面只是通过一个项目, 介绍了如何使用, 下面我们仔细的研究一下它都有哪些输入类型, 样式以及事件.

输入类型

上面已经介绍过了, 其实就是type. 可以通过InputType点出来所有的选项

不同的类型有不同的输入规则, Normal就是一个普通的输入, Number则是只允许输入数字, PhoneNumber就是只允许输入电话号码, Email会查看输入的是不是邮箱, 但是不会进行校验怕Password刚刚看过, 会自带一个小眼睛; 剩下的你可以自己试一试

样式

其实大部分样式都是通用样式, 比如背景颜色之类的, 可以多试试, 比如实现下面这样的样式:

@Entry
@Component
struct Index {
  @State inputThings: string = ""
  build() {
    Row() {
      Column({space: 20}) {
        TextInput()
          .width('80%')
          .backgroundColor(Color.Black)
          .borderRadius(10)
          .fontColor(Color.White)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

事件

学过前端的都知道其实表单输入框也就两个方法, 一个是输入后改变了, 返回改变后的内容, 一个就是当获取焦点的时候, 弹出个提示什么的. 鸿蒙自然也是有的, 下面介绍两个最常用的方法

onChanged

rt, 就是输入框的内容发生变化后, 会自动调用; 默认会传入一个value, 字符串类型, 再回调函数中处理输入的数据即可

.onChange((value: string) => {})

onForce

.onFocus(() => {})

当你点击输入框, 或者是焦点在这个输入框的时候会调用, 一般是用于在点击输入框的时候, 上面或者下面弹出来一个小的提示框, 告诉你输入规则之类的内容.

这个方法没有传入的参数, 需要注意和上面有一个区分.

End

那么就介绍到这里~, 希望本文能够帮到你一些!