如何在Flutter中实现图示的容器悬浮嵌套UI？

用Stack组件完全可以实现容器悬浮效果，你之前没成功大概率是没处理好组件层级和定位逻辑，以下是具体实现方法：

• 核心原理：Stack会按子组件的声明顺序堆叠，后添加的组件会覆盖在前面的组件之上。搭配Positioned可精准控制悬浮容器的位置，或用Align快速调整对齐方式。

• 基础实现代码：

Stack(
  children: [
    // 底层容器
    Container(
      width: double.infinity,
      height: 200,
      color: Colors.grey[300],
      alignment: Alignment.center,
      child: const Text('底层容器'),
    ),
    // 悬浮容器（通过Positioned定位）
    Positioned(
      top: 150, // 距离Stack顶部的距离
      left: 20, // 距离Stack左侧的距离
      child: Container(
        width: 120,
        height: 120,
        color: Colors.blue,
        alignment: Alignment.center,
        child: const Text('悬浮容器', style: TextStyle(color: Colors.white)),
      ),
    ),
  ],
)

• 进阶技巧：
  • 若要让悬浮容器居中悬浮，可替换Positioned为Align：

    Align(
      alignment: Alignment.center,
      child: Container(/* 悬浮容器样式 */),
    )
    

  • 若需要悬浮容器超出底层容器范围，可设置Stack的clipBehavior: Clip.none，默认Clip.hardEdge会裁剪超出边界的部分。

内容的提问来源于stack exchange，提问作者Miraj Hossain Shawon