flutter如何实现textarea输入框

在Flutter中如何实现一个多行文本输入框（类似HTML的textarea）？目前用TextField设置maxLines虽然可以换行，但高度不会自动扩展，且样式调整比较麻烦。请问有类似原生Textarea的组件吗？或者需要如何自定义实现？最好能支持自动高度调整和基础样式控制。

2 回复

Flutter中可使用TextField或TextFormField实现输入框。设置maxLines大于1即可变为多行文本框。常用属性包括decoration（装饰）、controller（控制器）和onChanged（回调）。

更多关于flutter如何实现textarea输入框的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，实现类似 HTML 中 textarea 的多行文本输入框，可以使用 TextField 或 TextFormField 组件，并通过设置属性来支持多行输入。以下是具体实现方法：

使用 TextField 实现多行输入框

  1. 设置 maxLines 属性：
    将 maxLines 设置为 null 或大于 1 的值（如 5），允许输入多行文本。设置为 null 时，文本框会根据内容自动扩展行数。

  2. 示例代码：

    TextField(
  maxLines: null, // 支持多行，自动扩展
  decoration: InputDecoration(
    hintText: '请输入多行文本...',
    border: OutlineInputBorder(), // 可选边框样式
  ),
)

使用 TextFormField（带表单验证）

如果需要在表单中使用并添加验证，可以用 TextFormField：

TextFormField(
  maxLines: 5, // 固定显示 5 行
  decoration: InputDecoration(
    labelText: '内容',
    hintText: '输入多行文本...',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return '请输入内容';
    }
    return null;
  },
)

关键属性说明

  • maxLines：控制最大行数（设为 null 可自动扩展）。
  • keyboardType: TextInputType.multiline：可优化键盘类型为多行输入（通常会自动适配）。
  • decoration：用于定义提示文本、标签和边框样式。

完整示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TextArea 示例')),
        body: Padding(
          padding: EdgeInsets.all(16),
          child: TextField(
            maxLines: null, // 多行自动扩展
            decoration: InputDecoration(
              hintText: '在此输入多行内容...',
              border: OutlineInputBorder(),
            ),
          ),
        ),
      ),
    );
  }
}

以上代码会创建一个可自动扩展高度的多行文本输入框，类似于 HTML 的 textarea。

回到顶部