使用Positioned参数时Stack无输出的Flutter技术问询

问题原因 #

当你给Positioned组件设置top/left等单方向定位参数时，必须同时明确组件的尺寸约束。如果只设置定位属性，既不指定宽高，也不让子组件自身具备确定尺寸，Positioned会因为没有可渲染的有效尺寸（宽高被压缩为0），导致界面上看不到任何内容。

而移除top/left参数时，Positioned的行为会退化为类似直接在Stack中放置子组件，此时子组件的自身尺寸会被默认采用，所以能正常显示。

修正方案 #

有三种常见的解决方式：

方式1：给Positioned直接设置宽高 #

在Positioned中添加width和height参数，明确组件的固定尺寸：

Stack(
  children: List.generate(3, (index) {
    return Positioned(
      top: 25.0 * index,
      left: 25.0 * index,
      width: 100.0,
      height: 100.0,
      child: Container(color: Colors.blue),
    );
  }),
)

方式2：让子组件自身具备确定尺寸 #

给Positioned的子组件（比如Container）设置宽高，Positioned会自动继承子组件的尺寸：

Stack(
  children: List.generate(3, (index) {
    return Positioned(
      top: 25.0 * index,
      left: 25.0 * index,
      child: Container(
        width: 100.0,
        height: 100.0,
        color: Colors.blue,
      ),
    );
  }),
)

方式3：用双向定位自动拉伸组件 #

如果希望组件根据两个方向的定位自动拉伸尺寸，可以同时设置left+right或top+bottom：

Stack(
  children: [
    Positioned(
      top: 25.0,
      left: 25.0,
      right: 25.0, // 同时设置left和right，组件会自动填充左右间距内的宽度
      child: Container(height: 100.0, color: Colors.blue),
    ),
  ],
)

验证效果 #

采用上述任意一种方式后，重新执行flutter run，设置了top/left参数的Positioned组件就能正常在界面上显示了。

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