Flutter中如何将多个TextFormField数据以数组形式存入Firestore

1. 调整状态变量，管理多个输入框 #

首先需要把单个title的状态改成列表形式，同时维护对应的TextEditingController列表，用来控制每个输入框的内容：

final FirebaseFirestore _firebaseFirestore = FirebaseFirestore.instance;
class _RepairState extends State<Repair> {
  String formattedDate = DateFormat('dd-MM-yyyy - kk:mm').format(DateTime.now());
  // 存储多个输入框的控制器
  List<TextEditingController> _titleControllers = [];
  // 存储所有输入的标题内容
  List<String> _titles = [];

  @override
  void initState() {
    super.initState();
    // 初始化时添加一个输入框
    _titleControllers.add(TextEditingController());
  }

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

2. 动态生成TextFormField及增删按钮 #

在UI部分通过循环渲染多个输入框，同时提供添加/删除按钮让用户自由控制输入框数量：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          // 动态生成输入框
          for (int i = 0; i < _titleControllers.length; i++)
            Row(
              children: [
                Expanded(
                  child: TextFormField(
                    controller: _titleControllers[i],
                    decoration: InputDecoration(labelText: '标题 ${i+1}'),
                    onChanged: (value) {
                      // 实时更新标题列表
                      if (_titles.length > i) {
                        _titles[i] = value.trim();
                      } else {
                        _titles.add(value.trim());
                      }
                    },
                  ),
                ),
                // 至少保留一个输入框时显示删除按钮
                if (_titleControllers.length > 1)
                  IconButton(
                    icon: Icon(Icons.remove_circle_outline),
                    onPressed: () {
                      setState(() {
                        _titleControllers[i].dispose();
                        _titleControllers.removeAt(i);
                        _titles.removeAt(i);
                      });
                    },
                  ),
              ],
            ),
          // 添加输入框按钮
          ElevatedButton(
            onPressed: () {
              setState(() {
                _titleControllers.add(TextEditingController());
              });
            },
            child: Text('添加新标题'),
          ),
          // 提交按钮
          ElevatedButton(
            onPressed: _submitRepairLogs,
            child: Text('提交记录'),
          ),
        ],
      ),
    ),
  );
}

3. 修改Firestore写入逻辑 #

更新createRepairLogs方法，将参数从单个字符串改为字符串列表，直接存入Firestore：

Future createRepairLogs(List<String> titles, String email, String desc, String date) async {
  await _firebaseFirestore.collection("Repair").doc().set({
    'titles': titles, // 字段名可根据需求调整，比如保留原字段名`title`也可以
    'email': email,
    'description': desc,
    'dateTime': date,
  });
}

// 提交处理方法
void _submitRepairLogs() {
  // 过滤掉空内容的标题
  List<String> validTitles = _titles.where((title) => title.isNotEmpty).toList();
  
  if (validTitles.isEmpty) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('请至少输入一个标题')),
    );
    return;
  }

  // 替换为实际获取的邮箱、描述值
  String userEmail = 'example@mail.com';
  String repairDesc = '设备故障描述';

  createRepairLogs(validTitles, userEmail, repairDesc, formattedDate);
}

关键注意点 #

• 必须在dispose方法中销毁所有TextEditingController，防止内存泄漏
• 可以根据需求添加输入验证逻辑，比如限制标题长度、格式等
• Firestore原生支持存储数组类型，直接传入List<String>即可完成存储

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