SwiftUI疑难布局：实现固定侧边与居中视图的布局需求

这个问题确实是SwiftUI布局里常见的小坑——传统AutoLayout里靠约束就能轻松搞定的效果，到SwiftUI里因为布局优先级和容器行为的差异，很容易踩坑。你的核心问题是给中间文本设置了layoutPriority(1.0)，导致它优先抢占空间，把左右文本给挤没了。下面是调整后的解决方案：

import SwiftUI

struct MyExample: View {
    let leftText: String
    let mainText: String
    let rightText: String
    
    var body: some View {
        HStack(spacing: 0) {
            // 左侧文本：固定自身宽度，避免被压缩
            if !leftText.isEmpty {
                Text(leftText)
                    .modifier(MyBigFont())
                    .fixedSize(horizontal: true, vertical: false)
            } else {
                Spacer()
            }
            
            // 中间文本：始终居中，超出时自动裁剪
            HStack {
                Spacer()
                Text(mainText)
                    .modifier(MyBigFont())
                    .lineLimit(1)
                    .clipShape(Rectangle())
                Spacer()
            }
            
            // 右侧文本：固定自身宽度，避免被压缩
            if !rightText.isEmpty {
                Text(rightText)
                    .modifier(MyBigFont())
                    .fixedSize(horizontal: true, vertical: false)
            } else {
                Spacer()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        VStack {
            MyExample(leftText:"ABC", mainText:"1234", rightText:"XYZ").padding()
            MyExample(leftText:"", mainText:"1234", rightText:"XYZ").padding()
            MyExample(leftText:"ABC", mainText:"12345678901234567890", rightText:"XYZ").padding()
            Spacer()
        }
    }
}

struct MyBigFont: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(Font.system(size: 42).bold())
    }
}

关键调整说明： #

• 左右文本处理：用fixedSize(horizontal: true, vertical: false)强制文本占据自身所需的最小宽度，不会被中间文本挤压。同时通过if !isEmpty判断，为空时用Spacer占位，保证中间文本始终处于居中位置。
• 中间文本容器：嵌套HStack+双Spacer的组合，让中间文本无论左右是否有内容，都能稳稳卡在父视图的中心。当中间文本过长时，lineLimit(1)配合默认裁剪行为，会自动截断超出部分，完全不会影响左右文本的显示。
• 移除布局优先级：删掉了中间文本的layoutPriority(1.0)，让布局系统优先满足左右文本的宽度需求，再把剩余空间分配给中间文本，彻底解决了侧边被裁剪的问题。

这样调整后，就能完美实现你要的所有效果：

1. 左右文本固定在父视图两端，中间文本始终居中
2. 任意侧边文本为空时，中间文本仍保持居中状态
3. 中间文本过长时，会被裁剪而不会挤压左右文本

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