arkUI：文本框、文本域的创建和常见用法（TextInput 、TextArea）

最新推荐文章于 2025-02-06 16:57:24 发布

原创最新推荐文章于 2025-02-06 16:57:24 发布 · 644 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#harmony #TextInput #TextArea #文本框 #文本域

arkUI 专栏收录该内容

22 篇文章

订阅专栏

arkUI：文本框、文本域的创建和常见用法（TextInput 、TextArea）

1 主要内容说明
2 例子
3.结语
4.定位日期

1 主要内容说明

简单记录arkUI文本框和文本域的基本创建及使用方法。源码添加了许多注释，足够用于理解，且没有很复杂的内容，所以便不过额外多做文字说明了。

2 例子

2.1 文本框、文本域的创建（TextInput 、TextArea）

文本框和文本域的简单创建。

2.1.1 源码1 （文本框、文本域的创建）

/**
 * 文本框，文本域
 */
@Entry
@Component
struct Page_TextInput_case {
  build() {
    // 使用 Column 布局，设置子组件之间的间距为 4
    Column({ space: 4 }) {
      // 输入框组件示例
      TextInput()
        .backgroundColor(Color.Orange) // 设置背景颜色为橙色

      // 带有占位符的输入框
      TextInput({ placeholder: "文本框：提示。。。" })
        .backgroundColor(Color.Yellow) // 设置背景颜色为黄色

      // 多行输入区域
      TextArea({ placeholder: "文本域：多行输入。。。" })
        .backgroundColor(Color.Green) // 设置背景颜色为绿色

      // 带有默认文本的多行输入区域
      TextArea({ text: "使用文本域输入内容：年年岁岁花相似，岁岁年年人不同。年年岁岁花相似，岁岁年年人不同。" })
        .width(200) // 设置宽度为 200
        .height(100) // 设置高度为 100
        .backgroundColor("#baa") // 设置背景颜色为指定的浅色
      // 注意：如果内容高度超过设置的高度，会出现滚动条
    }
  }
}

2.1.2 源码1运行效果

在这里插入图片描述

2.2 设置文本框的输入类型

平常在登陆某种账号时，需要输入账号、密码、验证码。账号基本有数字和字母，密码输入可能会有*号的隐藏显示，验证码设置为只能输入数字类型。

2.2.1 源码2（设置输入框的输入类型）

/**
 * 页面：文本框和文本域示例
 */
@Entry
@Component
struct Page_TextInput_case {
  build() {
    // 使用 Column 布局，设置子组件之间的间距为 4
    Column({ space: 4 }) {
      // 每一行的输入框都放在 Row 布局中
      Row() {
        Text("账号：") // 标签
        TextInput()
          .type(InputType.Normal) // 设置输入框类型为普通文本
          .backgroundColor("#bbc") // 设置背景颜色为灰色
          .layoutWeight(1) // 设置权重为 1，以填充剩余空间
      }

      Row() {
        Text("密码：") // 标签
        TextInput()
          .type(InputType.Password) // 设置输入框类型为密码
          .backgroundColor("#bbc") // 设置背景颜色为灰色
          .layoutWeight(1) // 设置权重为 1
      }
 
      Row() {
        Text("数字：") // 标签
        TextInput()
          .type(InputType.Number) // 设置输入框类型为数字
          .backgroundColor("#bbc") // 设置背景颜色为灰色
          .layoutWeight(1) // 设置权重为 1
      }
    }
  }
}

2.2.2 源码2运行效果

在这里插入图片描述

2.3 文本框的焦点事件

当我们输入账号时需要鼠标光标点到输入框位置，然后输入账号密码，最后摁登陆或回车进行账号登陆。这里我们未设置按钮。只设置回车后的效果。

2.3.1 源码3（文本框的焦点事件）

/**
 * 页面：文本框和文本域示例
 */
@Entry
@Component
struct Page_TextInput_case {
  build() {
    // 使用 Column 布局，设置子组件之间的间距为 20
    Column({ space: 20 }) {
      // 输入框获取焦点时的提示
      Text("onFocus 获取焦点，下文本框获得焦点时输出内容")
      TextInput()
        .backgroundColor("#bbc") // 设置背景颜色为灰色
        .onFocus(() => {
          console.log("我获得了焦点") // 当输入框获得焦点时输出
        })

      // 输入框失去焦点时的提示
      Text("onBlur 失去焦点，下文本框失去焦点时输出内容")
      TextInput()
        .backgroundColor("#bbc") // 设置背景颜色为灰色
        .onBlur(() => {
          console.log("我失去了焦点") // 当输入框失去焦点时输出
        })

      // 输入框回车时的提示
      Text("回车会触发onSubmit，下输入框有焦点时，摁键盘回车输出内容")
      TextInput()
        .backgroundColor("#bbc") // 设置背景颜色为灰色
        .onSubmit((EnterKeyType) => {
          console.log(EnterKeyType + " 摁了回车") // 当输入框按下回车时输出
        })
    }
  }
}