Flutter中如何实现组件环绕圆形组件的轨道式定位？

这里提供两种最常用的实现方案，适配不同场景需求：

一、Stack + Transform 组合方案 #

适合固定数量环绕组件的简单场景，实现成本低、易上手。
核心逻辑：用Stack作为容器，中心放置核心圆形组件，环绕组件通过极坐标转笛卡尔坐标计算位置，再用Transform.translate定位。

class OrbitWidget extends StatelessWidget {
  final List<Widget> orbitChildren;
  final Widget centerWidget;
  final double orbitRadius; // 轨道半径（中心组件边缘到环绕组件中心的距离）

  const OrbitWidget({
    super.key,
    required this.orbitChildren,
    required this.centerWidget,
    this.orbitRadius = 80,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        // 中心圆形组件
        centerWidget,
        // 生成环绕轨道组件
        ...List.generate(orbitChildren.length, (index) {
          // 计算角度（弧度），从顶部开始顺时针排列
          final angle = 2 * pi * index / orbitChildren.length - pi / 2;
          // 极坐标转笛卡尔坐标，得到偏移量
          final x = orbitRadius * cos(angle);
          final y = orbitRadius * sin(angle);

          return Transform.translate(
            offset: Offset(x, y),
            child: orbitChildren[index],
          );
        }),
      ],
    );
  }
}

// 使用示例
OrbitWidget(
  centerWidget: Container(
    width: 100,
    height: 100,
    decoration: const BoxDecoration(
      color: Colors.blue,
      shape: BoxShape.circle,
    ),
    child: const Center(child: Text("中心")),
  ),
  orbitChildren: [
    Container(width: 40, height: 40, color: Colors.red),
    Container(width: 40, height: 40, color: Colors.green),
    Container(width: 40, height: 40, color: Colors.yellow),
    Container(width: 40, height: 40, color: Colors.purple),
  ],
)

细节调整： #

• 若要让环绕组件与中心组件相切，orbitRadius可设为「中心组件半径 + 环绕组件半径」
• 若想让环绕组件始终保持正向（不随轨道角度旋转），可以在子组件外层包一层Transform.rotate(angle: -angle, child: ...)

二、CustomMultiChildLayout 自定义布局方案 #

适合动态数量、组件大小不一或需要精细布局控制的场景，扩展性更强。

class OrbitLayoutDelegate extends MultiChildLayoutDelegate {
  final int childCount;
  final double centerRadius;
  final double orbitRadius;

  OrbitLayoutDelegate({
    required this.childCount,
    required this.centerRadius,
    required this.orbitRadius,
  });

  @override
  void performLayout(Size size) {
    // 布局中心组件
    final centerId = 0;
    if (hasChild(centerId)) {
      layoutChild(centerId, BoxConstraints.tight(Size(centerRadius*2, centerRadius*2)));
      positionChild(centerId, Offset(
        (size.width - centerRadius*2)/2,
        (size.height - centerRadius*2)/2,
      ));
    }

    // 布局环绕组件
    for (int i = 1; i <= childCount; i++) {
      if (!hasChild(i)) continue;
      final childSize = layoutChild(i, BoxConstraints.loose(size));
      // 计算角度（弧度）
      final angle = 2 * pi * (i-1) / childCount - pi/2;
      // 计算组件中心坐标
      final centerX = size.width/2 + orbitRadius * cos(angle);
      final centerY = size.height/2 + orbitRadius * sin(angle);
      // 基于中心坐标定位组件（自动处理组件自身大小偏移）
      positionChild(i, Offset(
        centerX - childSize.width/2,
        centerY - childSize.height/2,
      ));
    }
  }

  @override
  bool shouldRelayout(covariant OrbitLayoutDelegate oldDelegate) {
    return childCount != oldDelegate.childCount ||
        centerRadius != oldDelegate.centerRadius ||
        orbitRadius != oldDelegate.orbitRadius;
  }
}

// 使用示例
CustomMultiChildLayout(
  delegate: OrbitLayoutDelegate(
    childCount: 4,
    centerRadius: 50,
    orbitRadius: 70,
  ),
  children: [
    LayoutId(
      id: 0,
      child: Container(
        decoration: const BoxDecoration(
          color: Colors.blue,
          shape: BoxShape.circle,
        ),
        child: const Center(child: Text("中心")),
      ),
    ),
    LayoutId(id: 1, child: Container(width:40, height:40, color: Colors.red)),
    LayoutId(id: 2, child: Container(width:40, height:40, color: Colors.green)),
    LayoutId(id: 3, child: Container(width:40, height:40, color: Colors.yellow)),
    LayoutId(id: 4, child: Container(width:40, height:40, color: Colors.purple)),
  ],
)

扩展技巧： #

• 若要添加轨道旋转动画，可结合AnimationController动态修改angle的偏移量，在performLayout中实时计算
• 调整angle的初始值（比如去掉-pi/2）可以改变环绕组件的起始排列方向

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