鸿蒙Next ArkTS中TextInput如何显示多行文本

在鸿蒙Next的ArkTS中，使用TextInput组件时，如何实现多行文本的显示？目前设置单行输入没问题，但需要支持用户输入和显示多行文本（比如备注或长内容），尝试过调整属性但无法自动换行。请问正确的实现方式是什么？是否需要配置特定参数或结合其他组件？

2 回复

在ArkTS中，让TextInput显示多行文本很简单：设置multiline属性为true，然后调整height或minHeight即可。代码示例：

TextInput({ placeholder: '请输入多行文本' })
  .multiline(true)
  .height(100)

这样就能愉快地换行输入啦！记得别让用户写太长的“史诗”，小心撑爆界面~

更多关于鸿蒙Next ArkTS中TextInput如何显示多行文本的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next的ArkTS中，要使TextInput组件显示多行文本，需要设置multiline属性为true，并调整TextInput的高度以容纳多行内容。以下是具体实现方法：

关键属性：

  • multiline: boolean：设置为true启用多行输入模式。
  • height: Length：必须设置足够的高度，否则可能无法显示多行文本。

示例代码：

import { TextInput } from '@kit.ArkUI';

@Entry
@Component
struct MultilineTextInputExample {
  @State text: string = '';

  build() {
    Column() {
      TextInput({ text: this.text, placeholder: '请输入多行文本...' })
        .multiline(true)  // 启用多行模式
        .height(120)      // 设置足够高度（单位：vp）
        .onChange((value: string) => {
          this.text = value;
        })
    }
    .width('100%')
    .padding(12)
  }
}

注意事项：

  1. 必须显式设置height属性，建议使用vp单位（如120vp）。
  2. 多行模式下，用户输入文本超过一行时会自动换行。
  3. 可通过maxLines属性限制最大行数（如.maxLines(5)）。
  4. 若需自适应高度，目前ArkTS的TextInput暂不支持，需通过监听内容变化动态计算高度。

这样设置后，TextInput即可正常显示和编辑多行文本。

回到顶部