Flutter中Stack组件内Positioned与SizedBox宽度设置不生效问题

你当前的问题出在给Positioned和SizedBox都设置了固定宽度320，而且Positioned没指定左右边界，导致容器没法适配不同屏幕的宽度。

直接按下面的方式修改代码即可：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Title Text'),
    ),
    body: SafeArea(
        child: Stack(children: [
      Column(
        children: const [
          Text('short content'),
        ],
      ),
      const Positioned(
          top: 100,
          left: 0, // 左边界贴紧父容器
          right: 0, // 右边界贴紧父容器
          child: SizedBox(
            height: 50, // 仅保留高度设置，移除固定宽度
            child: ColoredBox(color: Colors.red),
          ))
    ])),
  );
}

补充说明 #

如果不需要完全贴满屏幕，想留一点左右边距（比如各留10像素），只需要把left: 0改成left: 10，right: 0改成right: 10，容器会自动计算剩余可用宽度，不用再手动设置固定数值。

内容的提问来源于stack exchange，提问作者夜一林风