Flutter中如何在GridView.builder中设置TextFormField并合并12个内容为单个字符串

1. 管理输入控制器 #

先创建一个List<TextEditingController>，对应12个TextFormField的输入内容，初始化时生成12个控制器实例，页面销毁时记得销毁所有控制器，避免内存泄漏。

2. 生成带输入框的GridView #

用GridView.builder动态生成12个TextFormField，每个输入框绑定列表里对应的控制器，还可以设置单个字符输入限制和对应a、b、c的提示文本，和你原来的布局匹配。

3. 合并输入内容 #

点击“下一步”按钮时，遍历控制器列表，把每个输入框的文本内容拼接成单个字符串，空内容可以直接留空或者按你的需求处理。

完整代码示例 #

import 'package:flutter/material.dart';

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

  @override
  State<GridFormPage> createState() => _GridFormPageState();
}

class _GridFormPageState extends State<GridFormPage> {
  // 初始化12个输入控制器
  late List<TextEditingController> _controllers;

  @override
  void initState() {
    super.initState();
    _controllers = List.generate(12, (index) => TextEditingController());
  }

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

  // 合并输入内容的逻辑
  void _mergeContent() {
    // 遍历控制器，拼接所有输入的文本，空内容直接留空
    String mergedString = _controllers.map((ctrl) => ctrl.text).join('');

    // 这里可以替换成你需要的后续操作，比如跳转、提交等
    print('合并后的字符串：$mergedString');
    // 示例：弹窗展示结果
    showDialog(
      context: context,
      builder: (ctx) => AlertDialog(
        title: const Text('合并结果'),
        content: Text(mergedString),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(ctx),
            child: const Text('确定'),
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Grid输入示例')),
      body: Column(
        children: [
          Expanded(
            child: GridView.builder(
              padding: const EdgeInsets.all(16),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3, // 每行3个，12个刚好4行
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
              ),
              itemCount: 12,
              itemBuilder: (context, index) {
                return TextFormField(
                  controller: _controllers[index],
                  textAlign: TextAlign.center,
                  maxLength: 1, // 限制单个字符输入，和原文本格式匹配
                  decoration: InputDecoration(
                    border: const OutlineInputBorder(),
                    hintText: String.fromCharCode(97 + index), // 显示a、b、c...作为提示
                  ),
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(16),
            child: ElevatedButton(
              onPressed: _mergeContent,
              child: const Text('下一步'),
            ),
          )
        ],
      ),
    );
  }
}

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