ArkUI 中 TextInput 组件的应用详解

ArkUI中TextInput组件应用全解析

最新推荐文章于 2025-06-23 08:09:20 发布

原创

最新推荐文章于 2025-06-23 08:09:20 发布 · 585 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #华为 #Harmony next #兼容API12

1. 引言

在鸿蒙 ArkUI 开发中，TextInput 是一个常用的输入框组件，支持单行、多行输入、密码输入等多种类型，广泛用于登录、表单、搜索框等场景。本文将详细讲解 TextInput 的使用方法，并结合实际应用场景提供示例。

2. 基本使用

TextInput 组件用于接受用户输入文本，最简单的示例如下：

import {
   
    Component, State } from '@ohos.arkui';

@Component
struct BasicTextInput {
   
   
  @State inputValue: string = '';

  build() {
   
   
    Column({
   
    space: 10 }) {
   
   
      Text('请输入内容：')
        .fontSize(18)
        .textColor('#333333');
      
      TextInput({
   
    placeholder: '请输入文本' })
        .onInput(value => this.inputValue = value)
        .borderRadius(5)
        .backgroundColor('#F0F0F0')
        .padding(10)
        .width('90%');
      
      Text(`你输入的是: