SwiftUI技术问询：如何将视图对齐至HStack子视图及类UIView中心约束

当然有办法实现类似UIView中心约束的效果啦！在SwiftUI里，我们可以通过几种方式轻松把红色圆形精准定位到TileView "1"的中心，下面给你两种实用的方案：

方案一：自定义对齐指南（Alignment Guides） #

这种方式简单直接，适合布局结构比较固定的场景。我们可以给目标TileView定义一个自定义的对齐锚点，然后让ZStack里的圆形对齐到这个锚点：

首先，先定义一个自定义对齐类型：

extension HorizontalAlignment {
    private enum TileCenterAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[HorizontalAlignment.center]
        }
    }
    static let tileCenter = HorizontalAlignment(TileCenterAlignment.self)
}

extension VerticalAlignment {
    private enum TileCenterAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[VerticalAlignment.center]
        }
    }
    static let tileCenter = VerticalAlignment(TileCenterAlignment.self)
}

extension Alignment {
    static let tileCenter = Alignment(horizontal: .tileCenter, vertical: .tileCenter)
}

然后修改你的BoardView代码，给TileView 1添加对齐指南，同时让圆形对齐到这个自定义对齐：

struct BoardView: View {
    var body: some View {
        ZStack(alignment: .tileCenter) {
            VStack {
                HStack {
                    TileView(number: 1)
                        .alignmentGuide(.tileCenter) { $0[HorizontalAlignment.center] }
                        .alignmentGuide(.tileCenter) { $0[VerticalAlignment.center] }
                    TileView(number: 2)
                }
                HStack {
                    TileView(number: 3)
                    TileView(number: 4)
                }
            }
            Circle()
                .frame(width: 30, height: 30)
                .foregroundColor(Color.red.opacity(0.8))
        }
    }
}

原理很简单：我们给TileView 1的水平和垂直中心分别设置了自定义的对齐锚点，然后ZStack用这个自定义对齐方式，圆形就会自动对齐到TileView 1的中心啦。

方案二：使用PreferenceKey获取视图位置（更灵活） #

如果你的布局比较复杂，或者需要动态获取视图的位置，PreferenceKey是更好的选择。它能让我们获取到TileView 1在父视图中的位置信息，然后用这个信息来定位圆形：

首先定义一个PreferenceKey来存储视图的中心位置：

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

然后修改BoardView代码，让TileView 1把自己的中心位置传递给PreferenceKey，再让圆形根据这个位置定位：

struct BoardView: View {
    @State private var tile1Center: CGPoint = .zero
    
    var body: some View {
        ZStack {
            VStack {
                HStack {
                    TileView(number: 1)
                        .background(
                            GeometryReader { proxy in
                                Color.clear
                                    .preference(key: ViewCenterKey.self, value: proxy.frame(in: .global).center)
                            }
                        )
                    TileView(number: 2)
                }
                HStack {
                    TileView(number: 3)
                    TileView(number: 4)
                }
            }
            .onPreferenceChange(ViewCenterKey.self) { newCenter in
                tile1Center = newCenter
            }
            Circle()
                .frame(width: 30, height: 30)
                .foregroundColor(Color.red.opacity(0.8))
                .position(tile1Center)
        }
    }
}

// 给CGRect添加一个获取中心的扩展
extension CGRect {
    var center: CGPoint {
        CGPoint(x: midX, y: midY)
    }
}

这个方案的优势在于，即使TileView 1的位置因为布局变化（比如屏幕旋转、动态内容）而改变，圆形也会自动跟着移动到它的中心，非常灵活。

如果你只是简单场景，方案一足够好用；如果需要动态适配，方案二更合适。

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