SwiftUI HStack包含不同尺寸元素时如何让中间元素始终居中

你当前写法的问题在于，两个Spacer只会均分左右元素之外的剩余宽度，如果左右内容长度不一致，中间元素自然会偏移，无法对准整个HStack的中心。以下是两种可直接落地的实现方案：

方案1：三等分容器布局（最常用，无重叠风险） #

将HStack的宽度均分给左、中、右三个容器，每个容器内单独控制元素对齐，彻底避免内容长度影响中间元素位置，代码如下：

VStack(alignment: .leading){
    Text(item.itemName)
        .padding(1)
        .padding(.horizontal, 20)
    
    HStack{
        // 左侧元素
        Text("123454")
            .padding(.horizontal, 20)
            .frame(maxWidth: .infinity, alignment: .leading)
        
        // 中间元素
        Text(item.itemQuantity)
            .frame(maxWidth: .infinity, alignment: .center)
        
        // 右侧元素
        Text(item.itemPrice)
            .padding(.horizontal, 20)
            .frame(maxWidth: .infinity, alignment: .trailing)
    }
}

原理：三个设置了maxWidth: .infinity的容器会自动均分HStack的总宽度，中间容器的中心天然就是整个HStack的中心，左右内容只会在自身容器范围内排版，不会挤压中间区域。如果需要调整三个区域的宽度占比，给对应容器加上maxWidth参数指定比例即可。

方案2：Overlay居中布局（适合左右内容不会过长的场景） #

如果不需要三个区域等宽，可以直接把中间元素通过overlay挂载在HStack的中心，左右元素正常排布即可：

VStack(alignment: .leading){
    Text(item.itemName)
        .padding(1)
        .padding(.horizontal, 20)
    
    HStack{
        // 左侧元素
        Text("123454")
            .padding(.horizontal, 20)
        
        Spacer()
        
        // 右侧元素
        Text(item.itemPrice)
            .padding(.horizontal, 20)
    }
    // 中间元素默认对齐父视图正中央
    .overlay(Text(item.itemQuantity))
}

如果担心左右内容过长和中间元素重叠，可以给左右元素加上layoutPriority(1)，同时给中间元素加lineLimit(1)、minimumScaleFactor(0.5)适配压缩场景。

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