Flutter：如何在Row组件中添加两个TextField？现有代码报错

问题核心在于TextField默认会尽可能占据父容器的可用宽度，而Row组件要求子元素必须有明确的宽度约束，否则会因布局冲突导致无法正常同行显示，甚至触发溢出错误。

方案1：用Expanded分配宽度（推荐） #

通过Expanded组件为每个TextField分配Row内的可用空间，可按比例或均分宽度：

Container(
  child: Row(
    children: [
      Expanded(
        flex: 1, // 调整flex值可改变宽度占比，两个都设1即为均分
        child: TextField(decoration: InputDecoration(hintText: "输入框1")),
      ),
      SizedBox(width: 10), // 可选：添加输入框之间的间距
      Expanded(
        flex: 1,
        child: TextField(decoration: InputDecoration(hintText: "输入框2")),
      ),
    ],
  ),
)

方案2：设置固定宽度 #

如果需要固定尺寸的输入框，直接给TextField外层的Container设置width属性：

Container(
  child: Row(
    children: [
      Container(
        width: 150,
        child: TextField(decoration: InputDecoration(hintText: "固定宽输入框1")),
      ),
      SizedBox(width: 10),
      Container(
        width: 150,
        child: TextField(decoration: InputDecoration(hintText: "固定宽输入框2")),
      ),
    ],
  ),
)

方案3：用Flexible适配自适应空间 #

如果希望输入框宽度随内容自适应，且不强制占满剩余空间，可使用Flexible替代Expanded：

Container(
  child: Row(
    children: [
      Flexible(
        child: TextField(decoration: InputDecoration(hintText: "自适应输入框1")),
      ),
      SizedBox(width: 10),
      Flexible(
        child: TextField(decoration: InputDecoration(hintText: "自适应输入框2")),
      ),
    ],
  ),
)

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