「Mac畅玩鸿蒙与硬件13」鸿蒙UI组件篇3 - TextInput 组件获取用户输入

在鸿蒙应用开发中，TextInput 组件用于接收用户输入，适用于文本、密码等多种输入类型。本文详细介绍鸿蒙 TextInput 组件的使用方法，包括输入限制、样式设置、事件监听及搜索框应用，帮助你灵活处理鸿蒙应用中的用户输入。

关键词

• TextInput 组件
• 用户输入
• 输入限制
• 事件监听
• 搜索功能

一、TextInput 组件基础

TextInput 是接收用户文本输入的基础组件，支持多种输入类型、占位符、自定义样式等设置。

1.1 基本用法

• 创建文本输入框，设置占位符和背景颜色，并使用 @State 保存输入内容：

  @Entry
  @Component
  struct TextInputDemo {
       
    @State inputText: string = ''; // 定义状态变量保存输入内容
  
    build() {
       
      Column() {
       
        TextInput({
        placeholder: 'Enter text here' }) // 创建带占位符的输入框
          .onChange((value) => this.inputText = value) // 监听输入变化，将内容保存到 inputText
          .backgroundColor(Color.Pink) // 设置背景颜色为粉色
          .fontColor(Color.Black) // 设置文本颜色为黑色
          .fontSize(20) // 设置字体大小
      }
      .width('100%') // 设置列宽度为 100%
      .height('100%') // 设置列高度为 100%
    }
  }
  

效果示例

二、TextInput 样式设置

TextInput 支持多种样式设置，方便定制字体、占位符、边框和对齐等视觉效果。

2.1 自定义占位符样式

• 设置占位符的颜色和字体样式：

  TextInput({
        placeholder: 'Enter your username' }) // 设置占位符文本
    .placeholderColor(Color.Gray) // 设置占位符颜色为灰色
    .fontSize(18)