如何计算偏移量使HStack中的视图居中？以视图"2"居中为例

我有3个视图，每个视图需要对应连续的iPhone屏幕居中显示。请问怎么计算偏移量，才能在预览里让显示"2"的视图处于屏幕宽度的中心位置？

问题分析 #

你当前的代码通过position手动定位每个视图的中心，但偏移量计算有误，导致目标视图无法居中。核心逻辑是：每个视图宽度等于屏幕宽度，要让第2个视图（索引为1）居中，需要让整个横向容器向左偏移1倍屏幕宽度。

修正方案 #

先简化布局，让每个视图占满屏幕宽度，再通过偏移量调整位置：

struct DebugView: View { // 遵循Swift命名规范，类型名首字母大写
    @State private var currentIndex = 0
    @State private var offset = CGSize.zero
    
    private let choices: [String] = ["1", "2", "3"]
    
    var body: some View {
        GeometryReader { geometry in
            HStack(spacing: 0) { // 移除间距，让视图无缝排列
                ForEach(choices, id: \.self) { choice in
                    AssessmentChoiceView(choice: choice)
                        .frame(width: geometry.size.width) // 每个视图宽度匹配屏幕宽度
                }
            }
            .offset(x: -geometry.size.width * CGFloat(1)) // 偏移1倍屏幕宽度，让索引1的视图居中
        }
    }
}

原代码问题说明 #

你原来的position设置把每个视图的中心定位在(屏幕宽度/2 + 索引*屏幕宽度)的位置，导致整个HStack的有效范围是从屏幕宽度/2延伸到屏幕宽度/2 + 3*屏幕宽度。此时要让第二个视图的中心（屏幕宽度/2 + 1*屏幕宽度）对齐屏幕中心（屏幕宽度/2），需要向左偏移的距离就是1倍屏幕宽度，而你原代码里多减了屏幕宽度/2，导致偏移过度，目标视图会跑到屏幕左侧。

如果想保留原有的position写法，只需把偏移量修改为：

.offset(x: -geometry.size.width * CGFloat(1))

就能让显示"2"的视图居中。

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