SwiftUI中List内HStack元素的居中对齐问题

问题根源在于动态显示的右侧元素会改变Spacer的布局结构，导致中间的VStack位置偏移。以下是几种可行的修复方案：

方法一：固定占位容器维持布局 #

给右侧文本添加一个始终存在的占位容器，无论内容是否显示都保留对应空间，确保整体布局结构一致：

List {
    ForEach(adventureMode) { adMode in
        HStack {
            Text("Image")
            Spacer()
            VStack(alignment: .leading) {
                Text("Stage: \(adMode.stage)")
                Text("Steps: \(adMode.steps)")
            }
            Spacer()
            Text(adMode.unlock ? "Route Unlock" : "")
        }
    }
}

方法二：通过布局优先级强制居中 #

提升VStack的布局优先级，让它优先占据横向中间位置，配合frame确保填充空间：

List {
    ForEach(adventureMode) { adMode in
        HStack {
            Text("Image")
            VStack(alignment: .leading) {
                Text("Stage: \(adMode.stage)")
                Text("Steps: \(adMode.steps)")
            }
            .frame(maxWidth: .infinity, alignment: .center)
            .layoutPriority(1)
            if adMode.unlock {
                Text("Route Unlock")
            }
        }
    }
}

方法三：使用Grid精准控制列对齐（iOS 16+） #

如果项目支持iOS 16及以上版本，用Grid布局可以完全避免动态元素带来的偏移问题：

List {
    ForEach(adventureMode) { adMode in
        Grid(alignment: .center) {
            GridRow {
                Text("Image")
                VStack(alignment: .leading) {
                    Text("Stage: \(adMode.stage)")
                    Text("Steps: \(adMode.steps)")
                }
                .gridColumnAlignment(.center)
                adMode.unlock ? Text("Route Unlock") : Color.clear
            }
        }
    }
}

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