SwiftUI：如何让HStack中中间矩形始终保持居中布局

直接用ZStack嵌套HStack的结构，让中间矩形不受左右元素宽度影响，始终保持屏幕绝对居中：

ZStack(alignment: .center) {
    // 中间黄色矩形，固定居中
    Rectangle()
        .fill(Color.yellow)
        .frame(width: 100, height: 50)
    
    // 左右矩形分置两侧
    HStack {
        Rectangle()
            .fill(Color.red)
            .frame(width: 80, height: 50)
        
        Spacer()
        
        Rectangle()
            .fill(Color.blue)
            .frame(width: 120, height: 50)
    }
}

原理说明 #

• ZStack的居中对齐让黄色矩形直接锚定屏幕中心，不管左右元素宽度如何变化，位置都不会偏移。
• 外层HStack通过Spacer将左右矩形分别推至屏幕两侧，它们的宽度变化只会占用自身侧的空间，不会挤压中间的黄色矩形。

如果偏好使用单个HStack实现，可以通过自定义对齐指南，但ZStack的方式更直观易维护。

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