SwiftUI中偏移子视图后如何让父视图适配其完整边界

我正在制作一个展示特定分数的视图，需要父视图根据内部子视图自动调整尺寸。我在ZStack里放了Text视图和绘制根号的Canvas，给根号视图加了偏移来优化位置后，父视图没有跟着调整尺寸。我知道子视图的offset只会改变视觉位置，不影响父视图布局，想找合适的解决方法——既要正确定位根号，又要让绿色边框包围所有内容区域，方便后续添加和视图宽度匹配的分数条。

示例代码 #

struct CoordinateView: View {
  var body: some View {
    VStack(alignment: .leading) {
      TermView(value: 3, isSquareRoot: true)
    }
    .border(.green)
  }
}

struct TermView: View {
  var value: Int
  var isSquareRoot: Bool
  
  var body: some View {
    ZStack {
      Group {
        if isSquareRoot {
          SquareRootOverlay()
        }
      }
      Text("\(value)")
        .fontDesign(.rounded)
        .font(.system(size: 36))
        .fontWeight(.bold)
    }
  }
}

struct SquareRootOverlay: View {
  var body: some View {
    Canvas { context, size in
      let path = Path { path in
        path.move(to: CGPoint(x: 4, y: 18))
        path.addLine(to: CGPoint(x: 14, y: 38))
        path.addLine(to: CGPoint(x: 25, y: 4))
        path.addLine(to: CGPoint(x: 57, y: 4))
      }
      context.stroke(path, with: .color(.black), style: StrokeStyle(lineWidth: 4.4, lineCap: .round, lineJoin: .round))
    }
    .frame(width: 62, height: 44)
    .background(.yellow)
    .offset(x: -5, y: -3)
  }
}

问题示意图 #

核心思路是用可影响布局的间距替代offset，因为offset仅修改视觉位置，不会拓展父视图的布局边界，而padding、自定义对齐指南等方式能让父视图正确计算所有内容的尺寸。

方法一：用反向padding替代offset #

把offset换成反向padding，同时调整Canvas的绘制路径，让根号在正确位置显示，且父视图能识别到完整的内容边界：

struct SquareRootOverlay: View {
  var body: some View {
    Canvas { context, size in
      // 调整路径坐标，抵消原本offset的偏移量
      let path = Path { path in
        path.move(to: CGPoint(x: 4 + 5, y: 18 + 3))
        path.addLine(to: CGPoint(x: 14 + 5, y: 38 + 3))
        path.addLine(to: CGPoint(x: 25 + 5, y: 4 + 3))
        path.addLine(to: CGPoint(x: 57 + 5, y: 4 + 3))
      }
      context.stroke(path, with: .color(.black), style: StrokeStyle(lineWidth: 4.4, lineCap: .round, lineJoin: .round))
    }
    .frame(width: 62, height: 44)
    .background(.yellow)
    // 反向padding拓展父视图的布局边界，对应原offset的反向值
    .padding(.leading, -5)
    .padding(.top, -3)
  }
}

方法二：给父容器添加补偿padding #

如果不想修改根号的绘制路径，直接在TermView的ZStack外层添加对应偏移量的padding，让父视图包含偏移后的根号：

struct TermView: View {
  var value: Int
  var isSquareRoot: Bool
  
  var body: some View {
    ZStack {
      if isSquareRoot {
        SquareRootOverlay()
      }
      Text("\(value)")
        .fontDesign(.rounded)
        .font(.system(size: 36))
        .fontWeight(.bold)
    }
    // 添加补偿padding，让父视图拓展边界覆盖偏移后的根号
    .padding(.leading, 5)
    .padding(.top, 3)
  }
}

方法三：自定义对齐指南精准控制 #

如果需要更精细的布局调整，可通过自定义alignmentGuide来调整子视图位置，同时让父视图正确计算尺寸：

struct TermView: View {
  var value: Int
  var isSquareRoot: Bool
  
  var body: some View {
    ZStack(alignment: .customRootAlign) {
      if isSquareRoot {
        SquareRootOverlay()
          .alignmentGuide(.customRootAlign) { d in d[.leading] - 5 }
          .alignmentGuide(.top) { d in d[.top] - 3 }
      }
      Text("\(value)")
        .fontDesign(.rounded)
        .font(.system(size: 36))
        .fontWeight(.bold)
        .alignmentGuide(.customRootAlign) { d in d[.leading] }
    }
  }
}

// 自定义对齐指南
extension Alignment {
  private enum CustomRootAlign: AlignmentID {
    static func defaultValue(in context: ViewDimensions) -> CGFloat {
      context[.leading]
    }
  }
  static let customRootAlign = Alignment(CustomRootAlign.self)
}

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