Flutter布局疑问：Row、Column与Expanded为何需有限宽度约束

问题根源 #

咱们先搞懂为啥会报这个错：Expanded组件的核心逻辑是填充父级Flex容器（Row/Column）的剩余空间，但它有个硬性前提——父级必须给它一个有限的宽度/高度约束，让它能算出“剩余空间”到底有多大。

看你最初的代码：最外层Row的两个子元素是Column，而Column在水平方向默认是“收缩包裹”子元素的（子元素多宽它就多宽），没有给自己设定固定的宽度上限。这就导致Column里面的Row拿到的是无限宽的约束，里面的Expanded根本不知道该填充多少空间，直接触发了断言错误。

简单总结：内层Row需要一个确定的宽度才能让Expanded正常工作，但外层Column没给它这个明确约束，所以布局直接“卡壳”了。

最佳解决方案：给外层Column套Expanded #

你后来用的方法就是最优解——把每个外层Column用Expanded包裹起来，这样做的好处一目了然：

• 最外层Row的可用空间是整个屏幕宽度，两个默认flex=1的Expanded会把这个宽度平均分成两份，给每个Column分配一半的屏幕宽度。
• 现在Column有了明确的有限宽度约束，它里面的Row就知道自己的最大宽度是多少，里面的Expanded就能正常计算剩余空间，让TextField填满Column里除了标签之外的所有宽度。

最终可行代码：

import 'package:flutter/material.dart';
void main() {
 runApp(
  MaterialApp(
   debugShowCheckedModeBanner: false,
   home: Scaffold(
    body: Row(
     children: [
      Expanded(
       child: Column(
        children: [
         Row(children: [
          Text('Field 1:'),
          Expanded(
           child: TextField(),
          ),
         ]),
        ],
       ),
      ),
      Expanded(
       child: Column(
        children: [
         Row(children: [
          Text('Field 2:'),
          Expanded(
           child: TextField(),
          ),
         ]),
        ],
       ),
      ),
     ],
    ),
   ),
  ),
 );
}

额外小技巧 #

如果之后需要调整两列的宽度比例，只需要修改Expanded的flex属性就行。比如给其中一个设flex:2，另一个设flex:1，这样两列就会按照2:1的比例分配屏幕宽度。

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