为什么Row内的Slider宽度被压缩？如何让其占满父Row的全部宽度？

问题原因 #

这是Flutter布局约束规则直接导致的：

• Column在水平交叉轴方向会给子组件传递紧约束，要求子组件必须匹配Column的水平宽度，所以直接放在Column里的Slider能直接占满全宽。
• 即便你给Row设置mainAxisSize: MainAxisSize.max让Row自身占满了父组件的全部水平宽度，Row在主轴（水平）方向给子组件传递的依然是松约束，不会强制子组件填满剩余空间。Slider在接收到无强制宽度的松约束时，会默认使用自身内置的192px固定宽度，就出现了你看到的宽度压缩现象。
• 把Row换成Column后生效，本质是因为Column的交叉轴为水平方向，又变回了给子组件传递水平紧约束的逻辑。

解决方案 #

用Expanded组件包裹Row内的Slider即可，Expanded会强制子组件填充满Row主轴方向的剩余可用空间，给Slider传递紧宽度约束：

Column(
  children: [
    Slider(value: 0.33, onChanged: (v) {}),
    Row(
      children: [
        Expanded(
          child: Slider(value: 0.33, onChanged: (v) {}),
        ),
      ],
    )
  ],
)

如果Row内有多个子组件需要分配宽度，也可以配合Expanded的flex参数调整占比。

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