SwiftUI中如何计算偏移量实现HStack内两视图互换位置？

问题 #

在SwiftUI的HStack中放置两个视图，需实现左右位置互换：左视图移至右侧，右视图移至左侧。现有代码框架如下，但calculatedOffset的动态计算方式未知，要求避免硬编码或依赖UIScreen.bounds：

HStack {
    Spacer()
    LeftChannelView()
        .offset(x: swapLeftToRight ? calculatedOffset : 0.0)
    Spacer()
    RightChannelView()
        .offset(x: swapLeftToRight ? -calculatedOffset : 0.0)
    Spacer()
}

切换状态时已通过withAnimation实现流畅动画：

withAnimation {
    swapLeftToRight.toggle()
}

解决方案 #

利用GeometryReader结合PreferenceKey动态获取视图的位置信息，从而计算出准确的偏移量，无需依赖固定值或屏幕尺寸。

步骤1：定义PreferenceKey传递视图Frame #

创建PreferenceKey来收集视图在指定坐标系下的位置信息：

struct ViewFrameKey: PreferenceKey {
    static var defaultValue: [CGRect] = []
    static func reduce(value: inout [CGRect], nextValue: () -> [CGRect]) {
        value += nextValue()
    }
}

步骤2：修改HStack代码，收集视图位置 #

给两个视图添加GeometryReader背景，获取其在HStack专属坐标系下的frame，并通过preference传递：

@State private var swapLeftToRight = false
@State private var calculatedOffset: CGFloat = 0

var body: some View {
    HStack {
        Spacer()
        LeftChannelView()
            .background(
                GeometryReader { geo in
                    Color.clear
                        .preference(key: ViewFrameKey.self, value: [geo.frame(in: .named("StackSpace"))])
                }
            )
            .offset(x: swapLeftToRight ? calculatedOffset : 0)
        Spacer()
        RightChannelView()
            .background(
                GeometryReader { geo in
                    Color.clear
                        .preference(key: ViewFrameKey.self, value: [geo.frame(in: .named("StackSpace"))])
                }
            )
            .offset(x: swapLeftToRight ? -calculatedOffset : 0)
        Spacer()
    }
    .coordinateSpace(name: "StackSpace")
    .onPreferenceChange(ViewFrameKey.self) { frames in
        guard frames.count == 2 else { return }
        // 左视图移到右视图位置的偏移量 = 右视图起始位置 - 左视图起始位置
        calculatedOffset = frames[1].minX - frames[0].minX
    }
}

原理说明 #

• coordinateSpace(name:)为HStack创建专属坐标系，确保获取的frame是相对于HStack的位置，不受父视图影响
• GeometryReader获取每个视图在该坐标系下的frame，通过preference传递给父视图
• 在onPreferenceChange中，计算两个视图起始位置的差值，即为左视图需要右移的距离，右视图则反向移动相同距离
• 若视图宽度或布局变化，preference会自动更新偏移量，保证动画始终准确

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