Flutter：如何在Row中添加TextFormField并解决输入框过小问题

你的问题出在用ListTile包裹TextFormField——ListTile自带默认的padding和布局结构，会挤占输入框的可用空间，导致输入框被压缩到无法正常输入。以下是修正后的实现方案：

核心修改点 #

• 移除ListTile，直接将TextFormField作为Expanded的子组件
• 给TextFormField设置合适的contentPadding，保证输入区域有足够高度
• 用SizedBox在输入框之间添加横向间距，避免过于拥挤
• 对每行的Expanded设置相同的flex值，确保8个输入框平分行宽

完整示例代码 #

import 'package:flutter/material.dart';

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

  @override
  State<InputGridScreen> createState() => _InputGridScreenState();
}

class _InputGridScreenState extends State<InputGridScreen> {
  // 初始化16个输入框控制器
  final List<TextEditingController> _controllers = List.generate(16, (index) => TextEditingController());

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

  // 封装单行8个输入框的构建方法
  Widget _buildInputRow(int startIndex) {
    return Row(
      children: List.generate(8, (index) {
        final controllerIndex = startIndex + index;
        return Expanded(
          flex: 1,
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 4.0),
            child: TextFormField(
              controller: _controllers[controllerIndex],
              decoration: InputDecoration(
                border: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8)),
                ),
                contentPadding: const EdgeInsets.symmetric(
                  vertical: 12,
                  horizontal: 8,
                ), // 调整内边距保证输入区域高度
                isDense: true, // 减少输入框额外空白
              ),
              textAlign: TextAlign.center, // 输入内容居中，适配小输入框
            ),
          ),
        );
      }),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 24),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildInputRow(0), // 第一行（索引0-7）
            const SizedBox(height: 16), // 两行之间的间距
            _buildInputRow(8), // 第二行（索引8-15）
          ],
        ),
      ),
    );
  }
}

额外优化建议 #

• 若需限制输入长度，可给TextFormField添加maxLength属性
• 针对小屏幕设备，可将Row包裹在SingleChildScrollView中并设置scrollDirection: Axis.horizontal，开启横向滚动
• 根据实际需求调整padding和contentPadding的值，平衡布局紧凑度与输入体验

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