SwiftUI：如何按视图自身尺寸百分比偏移视图？

要实现基于自身尺寸百分比的偏移，同时避免GeometryReader改变原视图布局的问题，可以通过自定义ViewModifier结合偏好设置（PreferenceKey）来实现，以下是具体步骤：

1. 定义尺寸传递的偏好键 #

首先创建一个PreferenceKey，用于传递视图自身的尺寸信息：

struct ViewSizeKey: PreferenceKey {
    static var defaultValue: CGSize = .zero
    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

2. 实现百分比偏移的Modifier #

自定义ViewModifier，通过背景中的GeometryReader获取视图尺寸，再通过偏好设置传递尺寸，最终计算偏移量：

struct PercentageOffsetModifier: ViewModifier {
    let xPercent: CGFloat
    let yPercent: CGFloat
    
    @State private var viewSize: CGSize = .zero
    
    func body(content: Content) -> some View {
        content
            .background(
                // 用透明背景的GeometryReader获取视图自身尺寸，不影响原布局
                GeometryReader { proxy in
                    Color.clear
                        .preference(key: ViewSizeKey.self, value: proxy.size)
                }
            )
            .onPreferenceChange(ViewSizeKey.self) { newSize in
                viewSize = newSize
            }
            // 基于自身尺寸的百分比计算偏移
            .offset(x: viewSize.width * xPercent, y: viewSize.height * yPercent)
    }
}

3. 给View添加扩展方法 #

为了方便调用，给View添加扩展：

extension View {
    func percentageOffset(x: CGFloat, y: CGFloat) -> some View {
        self.modifier(PercentageOffsetModifier(xPercent: x, yPercent: y))
    }
}

使用示例 #

现在就可以像你期望的那样调用了：

Text("some text...")
    .percentageOffset(x: 0.5, y: 0) // 向右偏移自身宽度的50%
    .border(.red) // 可以直观看到原视图的尺寸范围

为什么不用直接嵌套GeometryReader？ #

直接用GeometryReader包裹视图时，它会强制视图占据父容器的全部可用空间，破坏原视图的固有布局行为；而通过background嵌入GeometryReader的方式，既可以获取视图自身的真实尺寸，又不会改变原视图的布局逻辑。

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