SwiftUI实现HStack中始终居中且不重叠的多行导航栏标题

可以通过HStack对称布局实现需求，完全不用ZStack、GeometryReader或硬编码frame宽度：

struct CustomNavBar: View {
    let title: String
    
    var body: some View {
        HStack(alignment: .center, spacing: 0) {
            // 左侧按钮
            Rectangle().fill(.red).frame(width: 20, height: 30)
            
            // 标题容器：占满剩余空间并居中
            Text(title)
                .multilineTextAlignment(.center)
                .frame(maxWidth: .infinity)
            
            // 右侧占位视图：和左侧按钮宽度一致，保证标题绝对居中
            Color.clear.frame(width: 20)
        }
        .border(Color.black, width: 2)
        .padding()
    }
}

// 使用示例
struct TextView: View {
    var body: some View {
        VStack(spacing: 20) {
            CustomNavBar(title: "Text always centered and not over rectangle")
            CustomNavBar(title: "Multi-line\ncentered title that won't overlap left button")
        }
    }
}

为啥这方案可行？ #

• 左边放实际按钮，右边加个和按钮同宽的透明占位，让HStack左右两侧宽度对称，标题自然就卡在导航栏绝对中心，不会被左边按钮挤偏。
• 标题用frame(maxWidth: .infinity)占满中间所有可用空间，配合多行居中设置，不管标题多长、换多少行，都不会碰到左侧按钮，彻底解决覆盖问题。
• 全程不用硬写固定尺寸，自动适配不同屏幕宽度，比ZStack那套逻辑更稳妥。

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