Flutter中如何实现TextFormField文本换行并随输入自动适配高度？

嘿，这个需求在Flutter里实现起来其实挺简单的，我给你拆解下关键配置和完整可运行的示例，帮你快速搞定：

核心属性配置要点 #

要同时实现自动换行和高度随内容动态调整，只需要给TextFormField设置几个关键属性：

• maxLines: null：默认maxLines是1，改成null才能让输入框支持无限换行（如果需要限制最大行数，直接设成具体数字比如3就行）
• minLines: 1：定义输入框的最小高度对应的行数，你可以根据需求改成2或其他数值
• textInputAction: TextInputAction.newline：让用户按回车时触发换行，而不是提交表单，提升多行输入的体验
• 额外优化：keyboardType: TextInputType.multiline：让系统键盘显示换行键，更符合多行输入的交互习惯

完整代码示例 #

下面是包含表单验证的完整示例，你可以直接复制运行：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('自适应高度输入框示例')),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: MyForm(),
        ),
      ),
    );
  }
}

class MyForm extends StatefulWidget {
  const MyForm({super.key});

  @override
  State<MyForm> createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('请输入多行内容：'),
          const SizedBox(height: 8),
          TextFormField(
            controller: _controller,
            // 核心配置
            maxLines: null,
            minLines: 1,
            textInputAction: TextInputAction.newline,
            keyboardType: TextInputType.multiline,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              hintText: '在这里输入支持自动换行的文本...',
            ),
            // 表单验证示例
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请输入内容';
              }
              return null;
            },
          ),
          const SizedBox(height: 16),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('输入内容：${_controller.text}')),
                );
              }
            },
            child: const Text('提交'),
          ),
        ],
      ),
    );
  }
}

细节补充 #

• 如果想限制输入框的最大高度，直接把maxLines设为具体数值（比如3），超过后输入框会自动显示垂直滚动条，不需要额外嵌套ScrollView
• 初始高度可以通过调整minLines来控制，比如设为2，输入框一开始就会显示两行的高度
• expands: false（默认值）是必须的，确保输入框高度随内容变化，而不是强制占满父容器的高度

内容的提问来源于stack exchange，提问作者Taufik Nur Rahmanda