如何在SwiftUI中通过数学布局实现完美三位一体圆环

要实现三个圆环完美对称且整体居中的布局，核心是利用圆周对称分布的数学逻辑：三个圆环的中心需围绕整体容器的中心点，呈120°夹角均匀分布在一个圆周上，这样整体重心自然落在容器中心，不会出现偏移。

关键数学逻辑 #

1. 以容器中心点为坐标原点(0,0)，定义每个圆环中心到原点的距离为offsetRadius（这个值可根据圆环的宽高调整，保证交叉效果符合预期）。
2. 三个圆环的中心对应的角度分别为0°、120°、240°（360°/3=120°，确保均匀分布）。
3. 将角度转为弧度（Swift三角函数使用弧度），通过三角函数计算每个圆环的偏移量：
   • 角度θ对应的x偏移：offsetRadius * cos(θ)
   • 角度θ对应的y偏移：offsetRadius * sin(θ)

修改后的Swift代码 #

ZStack {
    // 定义偏移半径，可根据实际需求调整，这里示例用width的0.2倍
    let offsetRadius = width * 0.2
    // 角度转弧度：120° = 2π/3，240°=4π/3
    let angle120 = Double.pi * 2 / 3
    let angle240 = Double.pi * 4 / 3
    
    // 第一个圆环：0°方向
    Circle()
        .frame(width: width * 0.73, height: width * 0.2)
        .offset(x: offsetRadius * CGFloat(cos(0)), y: offsetRadius * CGFloat(sin(0)))
    
    // 第二个圆环：120°方向
    Circle()
        .frame(width: width * 0.73, height: width * 0.2)
        .offset(x: offsetRadius * CGFloat(cos(angle120)), y: offsetRadius * CGFloat(sin(angle120)))
    
    // 第三个圆环：240°方向
    Circle()
        .frame(width: width * 0.73, height: width * 0.2)
        .offset(x: offsetRadius * CGFloat(cos(angle240)), y: offsetRadius * CGFloat(sin(angle240)))
}

为什么手动偏移不行？ #

手动硬编码固定偏移值（比如±10）没有考虑对称布局的数学规律，不仅无法适配不同尺寸的容器，还会导致三个圆环的重心偏离容器中心，自然无法实现完美居中。而基于圆周对称的计算方式，不管容器尺寸如何变化，三个圆环始终围绕中心点均匀分布，整体布局自动居中。

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