Flutter：如何使TextField适配Row嵌套的Container并解决溢出与高度适配问题

嘿，我太懂你这个布局头疼的点了！TextField在Row里要么超出Container范围，要么高度不对，其实是组件约束和默认样式在搞小动作，我给你调整下代码，保证能搞定：

问题根源拆解 #

• Row组件默认不会自动约束子组件宽度，固定宽度的Container在不同屏幕下很容易超出边界
• TextField本身自带默认内边距和最小高度，和外层固定高度的Container天生冲突
• 没设置垂直方向对齐，导致Icon和TextField排版错乱

修改后的完整代码 #

child: Column(
  children: [
    Padding(
      padding: const EdgeInsets.symmetric(vertical: 30),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.pink,
          borderRadius: BorderRadius.circular(50),
        ),
        // 给粉色Container添加上下内边距，避免内容贴边
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Row(
          // 垂直方向居中对齐，让Icon和TextField视觉对齐
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            const Icon(Icons.verified_user_outlined, color: Colors.white),
            const SizedBox(width: 12),
            // 用Expanded替代固定宽度，让TextField自动占满Row剩余空间
            Expanded(
              child: TextField(
                // 强制单行输入，精准控制高度
                maxLines: 1,
                minLines: 1,
                decoration: InputDecoration(
                  hintText: 'Enter Your Mobile Number',
                  errorText: '',
                  // 开启填充并设置白色背景
                  filled: true,
                  fillColor: Colors.white,
                  // 去掉默认边框，换成圆角匹配外层Container风格
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(25),
                    borderSide: BorderSide.none,
                  ),
                  // 调整TextField内部上下内边距，完美适配外层高度
                  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
                ),
              ),
            ),
          ],
        ),
      ),
    ),
    TextButton(onPressed: () {}, child: const Text("Continue")),
  ],
)

关键修改点说明 #

• 用Expanded替代固定宽度：让TextField自动适配Row剩余空间，再也不会在小屏幕上超出Container
• 设置垂直居中对齐：crossAxisAlignment: CrossAxisAlignment.center让Icon和TextField垂直方向对齐，视觉更协调
• 优化TextField高度与内边距：通过maxLines:1强制单行，contentPadding调整内部间距，彻底解决高度异常问题
• 给外层Container加padding：避免TextField贴在粉色Container边缘，让整体布局更宽松自然

你跑一下这段代码，应该就能完美适配啦！

内容的提问来源于stack exchange，提问作者Rk dev tech