如何获取溢出对象边界适配父视图？单位圆点标签溢出问题

实现单位圆可视化效果时，将点标签按圆形排列，但标签原点位于中心，导致标签溢出父视图。请问最佳解决方法是什么？能否获取溢出部分的边界并调整大小以适配Group，或是有其他方案？

struct UnitCircle: View {
  var body: some View {
    GeometryReader { geometry in
      let diameter = min(geometry.size.width, geometry.size.height)
      let radius = (diameter / 2)
      
      Group {
        ForEach(unitCirclePoints, id: \.angle) { point in
          VStack {
            PointView(point: point).border(.red).scaleEffect(0.3)
          }
          .position(
            x: radius * CGFloat(cos(Double(-point.angle) * .pi / 180)) + radius,
            y: radius * CGFloat(sin(Double(-point.angle) * .pi / 180)) + radius
          )
        }
      }.border(.red)
      
        .frame(width: diameter, height: diameter)
        .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
    }
  }
}

方案一：调整标签锚点，让边缘对齐圆周 #

当前代码把标签中心放在圆周上，导致标签向外溢出。可以通过获取标签自身尺寸，调整position计算，让标签的外侧边缘贴在圆周内侧，避免溢出。

修改后的代码示例：

struct UnitCircle: View {
  let unitCirclePoints: [PointModel]
  
  private func radians(from degrees: Double) -> Double {
    degrees * .pi / 180
  }
  
  var body: some View {
    GeometryReader { geometry in
      let diameter = min(geometry.size.width, geometry.size.height)
      let radius = diameter / 2
      
      Group {
        ForEach(unitCirclePoints, id: \.angle) { point in
          GeometryReader { labelGeo in
            PointView(point: point)
              .border(.red)
              .scaleEffect(0.3)
              .position(x: labelGeo.size.width/2, y: labelGeo.size.height/2)
          }
          .position(
            x: radius * CGFloat(cos(-radians(from: point.angle))) + radius 
              - (labelGeo.size.width/2 * CGFloat(cos(-radians(from: point.angle)))),
            y: radius * CGFloat(sin(-radians(from: point.angle))) + radius 
              - (labelGeo.size.height/2 * CGFloat(sin(-radians(from: point.angle))))
          )
        }
      }
      .border(.red)
      .frame(width: diameter, height: diameter)
      .position(x: geometry.size.width/2, y: geometry.size.height/2)
    }
  }
}

方案二：缩小有效半径，预留标签空间 #

通过获取所有标签的最大尺寸，提前缩小单位圆的有效半径，让标签整体在父视图范围内。这种方法需要用PreferenceKey收集标签尺寸。

修改后的代码示例：

// 定义PreferenceKey收集标签尺寸
struct LabelSizePreferenceKey: PreferenceKey {
  static var defaultValue: CGSize = .zero
  static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
    value.width = max(value.width, nextValue().width)
    value.height = max(value.height, nextValue().height)
  }
}

struct UnitCircle: View {
  let unitCirclePoints: [PointModel]
  @State private var maxLabelSize: CGSize = .zero
  
  private func radians(from degrees: Double) -> Double {
    degrees * .pi / 180
  }
  
  var body: some View {
    GeometryReader { geometry in
      let diameter = min(geometry.size.width, geometry.size.height)
      let baseRadius = diameter / 2
      // 缩小半径，预留标签空间
      let adjustedRadius = baseRadius - max(maxLabelSize.width, maxLabelSize.height)/2
      
      Group {
        ForEach(unitCirclePoints, id: \.angle) { point in
          PointView(point: point)
            .border(.red)
            .scaleEffect(0.3)
            // 收集标签尺寸
            .background(
              GeometryReader { geo in
                Color.clear.preference(key: LabelSizePreferenceKey.self, value: geo.size)
              }
            )
            .position(
              x: adjustedRadius * CGFloat(cos(-radians(from: point.angle))) + baseRadius,
              y: adjustedRadius * CGFloat(sin(-radians(from: point.angle))) + baseRadius
            )
        }
      }
      .onPreferenceChange(LabelSizePreferenceKey.self) { newSize in
        maxLabelSize = newSize
      }
      .border(.red)
      .frame(width: diameter, height: diameter)
      .position(x: geometry.size.width/2, y: geometry.size.height/2)
    }
  }
}

方案三：裁剪溢出部分（应急方案） #

如果仅需隐藏溢出内容，可给父Group添加裁剪，属于治标不治本的方案：

Group {
  // 原有标签代码
}
.border(.red)
.clipShape(Circle()) // 添加圆形裁剪
.frame(width: diameter, height: diameter)

SwiftUI的布局逻辑是先计算子视图尺寸再确定父视图布局，因此提前预留空间或调整锚点是更高效的方案，无需等待溢出后再调整边界。

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