Flutter中使用Expanded和Flex无法对齐TextField的问题

你当前的布局问题核心在于不同Row的flex比例不统一、硬编码宽高值以及未约束左右区域宽度，导致对齐失效、空间浪费和缩放错乱。以下是针对四个需求的修复方案：

关键修复点 #

• 统一左右两侧元素的宽度，保证水平对齐
• 中间区域用Expanded填充剩余空间，适配窗口缩放
• 移除硬编码宽高，优化右侧净重区域的空间利用
• 统一间距，避免视觉错位

修复后的完整代码 #

body: Column(children: [
  Row(
    children: [
      // 左侧Field1：固定宽度，和下方Weight TextField对齐
      SizedBox(
        width: 150,
        child: Container(
          margin: const EdgeInsets.fromLTRB(10, 0, 10, 0),
          height: 50,
          child: const TextField(
            decoration: InputDecoration(
              labelText: 'Field 1',
              border: OutlineInputBorder(),
            ),
          ),
        ),
      ),
      // 中间区域：自动填充剩余空间，适配窗口缩放
      Expanded(
        child: Container(color: Colors.teal, height: 50),
      ),
      // 右侧First Weight：固定宽度，和下方净重区域对齐
      SizedBox(
        width: 250,
        child: Container(
          margin: const EdgeInsets.fromLTRB(10, 0, 10, 0),
          height: 50,
          child: const TextField(
            decoration: InputDecoration(
              labelText: 'First Weight',
              border: OutlineInputBorder(),
            ),
          ),
        ),
      ),
    ],
  ),
  const SizedBox(height: 10.0),
  Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      // 左侧Weight TextField：和上方Field1同宽度
      SizedBox(
        width: 150,
        child: Container(
          margin: const EdgeInsets.fromLTRB(10, 0, 10, 0),
          height: 50,
          child: const TextField(
            decoration: InputDecoration(
              labelText: 'Weight',
              border: OutlineInputBorder(),
            ),
          ),
        ),
      ),
      // 中间区域：自动填充剩余空间
      Expanded(
        child: Container(color: Colors.teal, height: 100),
      ),
      // 右侧净重区域：固定宽度，和上方First Weight对齐
      SizedBox(
        width: 250,
        child: Container(
          height: 100,
          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start, // 内容左对齐，减少空白
            children: [
              const Text("Net Weight:", style: TextStyle(fontSize: 16)),
              const SizedBox(height: 5),
              Row(
                children: [
                  Container(color: Colors.teal, height: 10, width: 100),
                  const SizedBox(width: 5),
                  const Text("Second Weight:", style: TextStyle(fontSize: 16)),
                  const Spacer(), // 自动填充空白，让数值右对齐
                  const Text("100"),
                ],
              ),
              const SizedBox(height: 5),
              Row(
                children: [
                  Container(color: Colors.teal, height: 10, width: 100),
                  const SizedBox(width: 5),
                  const Text("First Weight:", style: TextStyle(fontSize: 16)),
                  const Spacer(),
                  const Text("60"),
                ],
              ),
              const SizedBox(height: 5),
              Row(
                children: [
                  Container(color: Colors.teal, height: 10, width: 100),
                  const SizedBox(width: 5),
                  const Text("Net Weight:", style: TextStyle(fontSize: 16)),
                  const Spacer(),
                  const Text("40"),
                ],
              ),
            ],
          ),
        ),
      ),
    ],
  ),
])

改动说明 #

1. 左侧TextField对齐：用SizedBox给两行左侧的TextField设置相同的固定宽度，同时统一margin，确保水平对齐。
2. 右侧净重区域优化：移除硬编码的width:1000，改用固定宽度的容器；用CrossAxisAlignment.start让文本左对齐，Spacer自动分配标签和数值的间距，减少无效空间。
3. First Weight与Net Weight对齐：让第一行右侧的TextField容器和第二行的净重区域使用完全相同的固定宽度，保证水平位置一致。
4. 缩放错乱解决：中间区域用Expanded包裹，负责填充窗口的剩余空间，窗口缩放时只有中间区域伸缩，左右两侧的固定宽度布局保持稳定，不会错乱。

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