Flutter中使用Positioned组件时内容不显示是什么原因？

问题原因排查 #

Positioned组件内容不显示的核心原因和Stack的尺寸规则、默认裁剪逻辑相关：

• Stack默认的自身尺寸由内部非定位子组件决定，你当前代码里只有Text("test")属于非定位子组件，因此Stack最终的尺寸和这个单行文本的尺寸完全一致，高度通常只有20dp左右。
• 你给Positioned设置了bottom: 0 + 100的固定高度，该组件的实际绘制区域会远超出Stack的自身高度范围。
• Stack默认的clipBehavior属性为Clip.hardEdge，会自动裁剪所有超出自身边界的内容，因此test2文本会被隐藏无法显示。

修复方案 #

可根据业务场景选择任意一种方案修复：

1. 给Stack添加明确的尺寸约束，比如套在SizedBox中让其占满可用空间：

@override
Widget build(BuildContext context) {
  return SizedBox(
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      children: [
        const Text("test"),
        Positioned(
          bottom: 0,
          left: 0,
          height: 100,
          width: 100,
          child: const Text("test2"),
        )
      ],
    ),
  );
}

2. 关闭Stack的边界裁剪，允许超出区域的内容正常展示：

Stack(
  clipBehavior: Clip.none,
  children: [
    const Text("test"),
    Positioned(
      bottom: 0,
      left: 0,
      height: 100,
      width: 100,
      child: const Text("test2"),
    )
  ],
)

3. 调整Positioned的定位参数，避免绘制区域超出Stack边界，比如把bottom: 0修改为top: 0，让组件从Stack顶部开始绘制。

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