SwiftUI中HStack内特定视图居中的实现方案咨询

嘿，这个需求我太有共鸣了！之前做项目的时候也纠结过好久——常规的Spacer()根本没法让中间视图真正居中，用ZStack叠上去又会出现左右视图太宽就重叠的问题，确实头疼。不过SwiftUI里还是有几种方法能实现你要的这种优先居中，冲突时自动避让的效果，我给你分享两个实用的方案：

方案一：利用PreferenceKey捕获宽度，动态调整偏移量（兼容iOS13+） #

这个思路是先获取左右两个视图的宽度，然后计算中间视图应该有的偏移量，确保它既居中，又不会被左右视图重叠。

首先定义一个PreferenceKey来传递宽度信息：

struct ViewWidthKey: PreferenceKey {
    static var defaultValue: CGFloat = 0
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

然后在视图里结合GeometryReader获取父容器的尺寸，动态计算偏移：

struct CenteredMiddleView: View {
    @State private var leftWidth: CGFloat = 0
    @State private var rightWidth: CGFloat = 0
    
    var body: some View {
        GeometryReader { proxy in
            HStack(spacing: 0) {
                Text("左边超长文本测试左边超长文本测试")
                    .background(Color.yellow)
                    .overlay(
                        GeometryReader { geo in
                            Color.clear.preference(key: ViewWidthKey.self, value: geo.size.width)
                        }
                    )
                    .onPreferenceChange(ViewWidthKey.self) { leftWidth = $0 }
                
                Spacer()
                
                Text("居中")
                    .background(Color.green)
                    .offset(x: calculateOffset(proxy: proxy))
                
                Spacer()
                
                Text("右边文本")
                    .background(Color.blue)
                    .overlay(
                        GeometryReader { geo in
                            Color.clear.preference(key: ViewWidthKey.self, value: geo.size.width)
                        }
                    )
                    .onPreferenceChange(ViewWidthKey.self) { rightWidth = $0 }
            }
        }
        .padding()
    }
    
    private func calculateOffset(proxy: GeometryProxy) -> CGFloat {
        let parentCenter = proxy.size.width / 2
        let leftEdgeLimit = leftWidth
        let rightEdgeLimit = proxy.size.width - rightWidth
        let middleViewHalfWidth = Text("居中").sizeThatFits(.infinity).width / 2
        
        // 计算中间视图的安全范围：不能被左右视图覆盖
        let idealMiddleX = parentCenter - middleViewHalfWidth
        let minSafeX = leftEdgeLimit
        let maxSafeX = rightEdgeLimit - middleViewHalfWidth
        
        if idealMiddleX < minSafeX {
            return minSafeX - idealMiddleX
        } else if idealMiddleX > maxSafeX {
            return maxSafeX - idealMiddleX
        } else {
            return 0
        }
    }
}

这个方案的核心是通过PreferenceKey拿到左右视图的宽度，然后动态调整中间视图的偏移量：当中间视图的理想居中位置被左边视图挡住时，就往右偏移；被右边视图挡住时，就往左偏移，完美匹配你要的效果。

方案二：自定义Layout（iOS16+） #

如果你只需要支持iOS16及以上版本，用SwiftUI的Layout协议会更优雅，代码也更简洁，完全贴合自定义布局的需求：

struct CenteredMiddleLayout: Layout {
    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let totalWidth = subviews.reduce(0) { $0 + $1.sizeThatFits(proposal).width }
        let maxHeight = subviews.map { $0.sizeThatFits(proposal).height }.max() ?? 0
        return CGSize(width: proposal.width ?? totalWidth, height: proposal.height ?? maxHeight)
    }
    
    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        guard subviews.count == 3 else { return }
        
        let leftSize = subviews[0].sizeThatFits(proposal)
        let middleSize = subviews[1].sizeThatFits(proposal)
        let rightSize = subviews[2].sizeThatFits(proposal)
        
        // 中间视图的理想居中位置
        let idealMiddleX = bounds.midX - middleSize.width / 2
        
        // 左右视图的边缘位置
        let leftViewRightEdge = bounds.minX + leftSize.width
        let rightViewLeftEdge = bounds.maxX - rightSize.width
        
        // 确定中间视图的实际位置：不能被左右视图覆盖
        let actualMiddleX = max(leftViewRightEdge, min(idealMiddleX, rightViewLeftEdge - middleSize.width))
        
        // 放置三个视图，垂直居中对齐
        subviews[0].place(at: CGPoint(x: bounds.minX, y: bounds.midY - leftSize.height / 2), proposal: proposal)
        subviews[1].place(at: CGPoint(x: actualMiddleX, y: bounds.midY - middleSize.height / 2), proposal: proposal)
        subviews[2].place(at: CGPoint(x: rightViewLeftEdge, y: bounds.midY - rightSize.height / 2), proposal: proposal)
    }
}

使用的时候直接把三个视图放到这个自定义Layout里即可：

struct ContentView: View {
    var body: some View {
        CenteredMiddleLayout {
            Text("左边超长文本测试左边超长文本测试")
                .background(Color.yellow)
            Text("居中")
                .background(Color.green)
            Text("右边文本")
                .background(Color.blue)
        }
        .padding()
    }
}

这个自定义Layout会自动计算每个视图的位置，优先让中间视图居中，当左右视图宽度超过可用空间时，自动调整中间视图的位置避免重叠，逻辑清晰，代码也更容易维护。

其实这个需求和AutoLayout里的「优先级约束」思路很像——先给中间视图加居中的高优先级约束，再加上左右不重叠的低优先级约束，SwiftUI里我们用代码实现了同样的逻辑~

内容来源于stack exchange