SwiftUI如何计算HStack偏移量实现选中子视图屏幕居中

核心逻辑很简单：算出选中子视图中点距离HStack左边缘的位置，把这个点对齐到父容器的水平中线，两个位置的差值就是HStack需要设置的水平偏移量。
计算时别漏三个影响宽度的参数：

• 未选中子视图固定宽度100
• 选中子视图缩放1.15倍，实际渲染宽度为115
• SwiftUI默认HStack子项间距为8，如果你自定义了spacing直接替换成对应值就行

具体计算步骤：

• 读取HStack父容器的总宽度，水平中线位置就是总宽度的1/2。这里用GeometryReader读取比直接取UIScreen尺寸适配性好很多，能自动适配分屏、横竖屏、弹窗等非全屏场景。
• 累加选中索引之前所有子项的宽度+子项间距，得到选中项左边缘距离HStack左边界的距离。
• 再加上选中项自身宽度的一半，就是选中项中点距离HStack左边界的坐标。
• 用父容器中线位置减去这个中点坐标，得到基础偏移量。
• 可选：加边界钳制逻辑，避免选中首尾子项时HStack偏移太多，两侧露出空白。

import SwiftUI

struct CenteredHStackView: View {
    @State var buttons: [String] = ["Button"]
    @State var selectedButtonIndex: Int = 0
    // 固定配置参数，修改样式直接改这里就行
    private let itemWidth: CGFloat = 100
    private let itemHeight: CGFloat = 50
    private let hstackSpacing: CGFloat = 8
    private let selectedScale: CGFloat = 1.15
    
    // 传入父容器宽度计算偏移量
    private func getOffset(containerWidth: CGFloat) -> CGFloat {
        let centerX = containerWidth / 2
        var selectedItemMidX: CGFloat = 0
        
        // 计算选中项中点距离HStack左边缘的位置
        for i in 0..<buttons.count {
            let currentItemWidth = i == selectedButtonIndex ? itemWidth * selectedScale : itemWidth
            if i < selectedButtonIndex {
                selectedItemMidX += currentItemWidth + hstackSpacing
            } else if i == selectedButtonIndex {
                selectedItemMidX += currentItemWidth / 2
                break
            }
        }
        
        var offset = centerX - selectedItemMidX
        
        // 边界钳制：避免选中首尾项时HStack两侧留空，不需要可以删掉这段
        var totalHStackWidth: CGFloat = 0
        for i in 0..<buttons.count {
            totalHStackWidth += i == selectedButtonIndex ? itemWidth * selectedScale : itemWidth
            if i != buttons.count - 1 {
                totalHStackWidth += hstackSpacing
            }
        }
        let maxLeftOffset = (containerWidth - totalHStackWidth) / 2
        let maxRightOffset = (totalHStackWidth - containerWidth) / 2
        offset = min(max(offset, -maxRightOffset), maxLeftOffset)
        
        return offset
    }
    
    var body: some View {
        VStack {
            Button("tap") {
                buttons.append("another button")
            }
            .padding(.top, 100)
            
            GeometryReader { proxy in
                HStack(spacing: hstackSpacing) {
                    ForEach(0..<buttons.count, id: \.self) { index in
                        Rectangle()
                            .fill(index == selectedButtonIndex ? .blue : .gray)
                            .frame(width: itemWidth, height: itemHeight)
                            .scaleEffect(index == selectedButtonIndex ? selectedScale : 1)
                            .onTapGesture {
                                withAnimation(.easeInOut(duration: 0.2)) {
                                    selectedButtonIndex = index
                                }
                            }
                    }
                }
                .offset(x: getOffset(containerWidth: proxy.size.width))
                .frame(maxHeight: .infinity)
            }
        }
    }
}

• 原代码里scaleEffect修饰符中写的selectedIndex是变量名笔误，需要替换成你定义的selectedButtonIndex，否则会编译报错。
• 点击切换选中项时给状态更新加withAnimation包裹，能实现平滑的过渡动画，交互体验更好。
• 如果后续要改子项宽度、HStack间距、缩放比例，只要修改开头定义的对应常量就行，计算逻辑不用动。
• 如果子项宽度不是固定值，可以给每个子项绑定GeometryReader读取实际渲染宽度，再代入计算逻辑即可，核心对齐思路不变。

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