Flutter开发：如何实现并排TextField及支持添加更多TextField的按钮

嘿，这个需求很实用，我来给你一步步实现它～核心思路是用一个列表来管理每个TextField的控制器，通过点击按钮动态添加控制器并刷新UI，同时用合适的布局组件来实现并排效果。

完整示例代码 #

import 'package:flutter/material.dart';

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

  @override
  State<DynamicTextFieldScreen> createState() => _DynamicTextFieldScreenState();
}

class _DynamicTextFieldScreenState extends State<DynamicTextFieldScreen> {
  // 用列表管理所有TextField的控制器，初始添加两个
  final List<TextEditingController> _textControllers = [
    TextEditingController(),
    TextEditingController(),
  ];

  @override
  void dispose() {
    // 务必销毁所有控制器，避免内存泄漏
    for (var controller in _textControllers) {
      controller.dispose();
    }
    super.dispose();
  }

  // 添加新TextField的方法
  void _addNewTextField() {
    setState(() {
      _textControllers.add(TextEditingController());
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('动态输入框示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 用Wrap实现自动换行的并排布局，灵活适配不同数量的输入框
            Wrap(
              spacing: 12.0, // 输入框之间的横向间距
              runSpacing: 12.0, // 换行后的纵向间距
              children: _textControllers.map((controller) {
                return SizedBox(
                  width: 160, // 固定每个输入框的宽度，保证并排效果
                  child: TextField(
                    controller: controller,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      hintText: '请输入内容',
                    ),
                  ),
                );
              }).toList(),
            ),
            const SizedBox(height: 24),
            // 添加按钮
            ElevatedButton(
              onPressed: _addNewTextField,
              child: const Text('添加更多输入框'),
            ),
          ],
        ),
      ),
    );
  }
}

关键细节说明 #

• 控制器管理：用List<TextEditingController>来维护每个输入框的状态，初始默认添加两个控制器，对应初始的两个TextField。点击按钮时，向列表中新增控制器并调用setState触发UI刷新。
• 布局选择：这里用Wrap组件实现并排+自动换行的效果，比固定Row更灵活，避免输入框过多时出现溢出问题。如果你需要横向滚动的并排效果，可以把Wrap换成SingleChildScrollView包裹Row：

  SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: _textControllers.map((controller) {
        return Padding(
          padding: const EdgeInsets.only(right: 12.0),
          child: SizedBox(
            width: 160,
            child: TextField(controller: controller, ...),
          ),
        );
      }).toList(),
    ),
  )
  

• 内存泄漏防护：在dispose方法中遍历销毁所有控制器，这是Flutter开发中容易忽略但非常重要的细节。

如果需要调整输入框的样式、间距或者其他交互逻辑，随时告诉我哦～

内容的提问来源于stack exchange，提问作者DARIO