Flutter Row嵌套布局：替换screenSize.width-30写法的可行方案

当然有几种更优雅的方式来替代你当前手动计算screenSize.width - 30的写法，不仅能避免硬编码的弊端，还能让布局更适配各种屏幕场景：

方案1：使用Expanded组件填充剩余空间 #

这是最直接且推荐的方案，利用Flutter的Flex布局系统自动分配空间，完全不需要依赖屏幕尺寸计算：

Row(
  children: <Widget>[
    Container(width: 30),
    // 用Expanded包裹Column，自动填充Row剩余空间
    Expanded(
      child: Column(
        children: <Widget>[
          Text("label"),
          Row(
            children: <Widget>[
              Expanded(child: TextField()),
              Expanded(child: TextField()),
            ],
          ),
        ],
      ),
    ),
  ],
);

为什么这更好？ #

• Expanded会自动获取Row中未被左侧30宽度Container占用的所有可用空间，彻底摆脱手动计算屏幕宽度的麻烦
• 适配屏幕旋转、不同尺寸设备时更可靠，不会因为硬编码的减法导致布局溢出或留白
• 代码更简洁，逻辑更清晰，完全符合Flutter的布局设计思想

方案2：使用Flexible组件（按需选择） #

如果你的布局需要更灵活的空间分配（比如允许子组件不强制填满剩余空间），可以用Flexible替代Expanded：

Row(
  children: <Widget>[
    Container(width: 30),
    Flexible(
      fit: FlexFit.tight, // 设为tight时效果和Expanded完全一致
      child: Column(
        children: <Widget>[
          Text("label"),
          Row(
            children: <Widget>[
              Expanded(child: TextField()),
              Expanded(child: TextField()),
            ],
          ),
        ],
      ),
    ),
  ],
);

注意 #

Flexible默认的fit是FlexFit.loose，此时子组件只会占用自身需要的空间；如果需要填满剩余空间，设置fit: FlexFit.tight即可，效果和Expanded完全相同。

方案3：移除多余的Container #

仔细看你的代码，Column下的那个Container其实是多余的——Column本身可以直接作为Expanded的子组件，移除这个Container能进一步简化结构，同时达到完全一致的布局效果，这也是方案1中代码的写法。

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