SwiftUI中如何让HStack内指定文本居中屏幕其余元素居首尾？

要实现HStack里第一个元素贴左、第二个“2”严格对齐屏幕正中间、第三个元素贴右的效果，普通Spacer的方式会让中间元素在左右元素之间居中，而非屏幕中心，这里给你两种可行的解法：

解法一：用Overlay快速实现 #

这种方法最简单直接，把需要居中的元素作为整个HStack的叠加层，直接对齐屏幕中心：

VStack {
    // 先放置左右两个元素的HStack
    HStack {
        Text("1")
        Spacer()
        Text("Some more text")
    }
    .frame(maxWidth: .infinity) // 让HStack撑满屏幕宽度
    .background(.red)
    .padding()
    // 叠加居中的"2"，对齐屏幕中心位置
    .overlay(
        Text("2"),
        alignment: .center
    )
}
.frame(maxWidth: .infinity)
.background(.blue)

解法二：用自定义水平对齐实现 #

如果需要通过对齐规则来控制，可自定义水平对齐标识，精准控制每个元素的位置：

首先定义自定义水平对齐，默认指向屏幕水平中心：

extension HorizontalAlignment {
    private enum ScreenCenterAlignment: AlignmentID {
        static func defaultValue(in context: ViewDimensions) -> CGFloat {
            context[HorizontalAlignment.center]
        }
    }
    
    static let screenCenter = HorizontalAlignment(ScreenCenterAlignment.self)
}

然后在视图中使用该对齐，让HStack撑满宽度，并给左右元素设置对齐基准：

VStack {
    HStack(alignment: .center, spacing: 0) {
        Text("1")
            // 将该元素的对齐基准设为HStack的leading位置
            .alignmentGuide(.screenCenter) { _ in 0 }
        
        Text("2")
            // 默认对齐自定义的screenCenter（即屏幕中心）
        
        Text("Some more text")
            // 将该元素的对齐基准设为自身宽度，对应HStack的trailing位置
            .alignmentGuide(.screenCenter) { $0.width }
    }
    .frame(maxWidth: .infinity, alignment: .screenCenter) // 关键：HStack撑满宽度并应用自定义对齐
    .background(.red)
    .padding()
}
.frame(maxWidth: .infinity)
.background(.blue)

说明 #

自定义的screenCenter对齐默认绑定屏幕中心，HStack撑满宽度后，通过alignmentGuide分别指定左右元素的对齐基准点，中间元素则自动对齐屏幕中心，从而实现三个元素各自的位置要求。

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