Flutter布局求助：如何在中心圆形周围完整布局其他圆形？

这个问题我之前也碰到过！核心原因是Stack组件默认的clipBehavior属性为Clip.hardEdge，它会自动裁切超出Stack边界的子组件，所以你用Positioned定位的圆形才会被切掉。咱们可以通过以下几步解决：

1. 关闭Stack的裁切行为 #

给Stack添加clipBehavior: Clip.none，这会允许子组件超出Stack的边界显示，不会被裁切。这是最关键的一步。

2. 合理定位周围圆形 #

你可以继续用Positioned组件，只需要调整偏移量让圆形部分或全部露出中心圆外。比如想在中心圆的正上方放一个小圆形，就给Positioned设置top: -30（假设小圆形直径是60，这样一半在中心圆外，一半在里面）。

3. 确保父容器不限制显示空间 #

如果你的Stack被包裹在一个有固定尺寸的容器里（比如大小刚好等于中心圆的SizedBox），即使关闭了Stack的裁切，父容器可能还是会挡住超出的部分。这时候可以给Stack设置足够的padding，或者让父容器的大小能容纳所有圆形的范围。

完整示例代码 #

Stack(
  clipBehavior: Clip.none, // 重点：关闭裁切
  alignment: Alignment.center,
  children: [
    // 中心大圆形
    Container(
      width: 200,
      height: 200,
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: Colors.blueAccent,
      ),
      child: const Center(
        child: Text(
          "Start",
          style: TextStyle(fontSize: 28, color: Colors.white),
        ),
      ),
    ),
    // 上方小圆形
    Positioned(
      top: -30,
      child: Container(
        width: 60,
        height: 60,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.orange,
        ),
      ),
    ),
    // 右侧小圆形
    Positioned(
      right: -30,
      child: Container(
        width: 60,
        height: 60,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.lightGreen,
        ),
      ),
    ),
    // 下方小圆形
    Positioned(
      bottom: -30,
      child: Container(
        width: 60,
        height: 60,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.redAccent,
        ),
      ),
    ),
    // 左侧小圆形
    Positioned(
      left: -30,
      child: Container(
        width: 60,
        height: 60,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.purpleAccent,
        ),
      ),
    ),
  ],
)

替代方案：用Align + Transform.translate #

如果你觉得Positioned的定位不够直观，也可以用Align组件结合Transform.translate来调整位置，效果是一样的：

Align(
  alignment: Alignment.topCenter,
  child: Transform.translate(
    offset: const Offset(0, -30), // 向上偏移30
    child: Container(
      width: 60,
      height: 60,
      decoration: const BoxDecoration(shape: BoxShape.circle, color: Colors.orange),
    ),
  ),
)

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