SwiftUI中如何精准居中标题视图并将其他视图置于右侧？

问题分析 #

• 使用.position()时，视图会脱离父布局流，基于父视图坐标定位，导致它占据全部可用空间，直接把右侧按钮挤出可视区域。
• 使用.offset()只是视觉偏移，布局空间仍保留在原位置，需要硬编码数值，适配性差。

正确解决方案 #

方案1：自适应居中（推荐）

利用HStack和Spacer实现完全自适应的布局，无需硬编码任何数值：

struct CorrectNavigationLayout: View {
    var body: some View {
        HStack {
            Spacer()
            Text("App title")
                .border(Color.blue)
            Spacer()
            Group {
                Text("Edit")
                Text("...")
            }
            .border(.yellow)
        }
        .padding()
    }
}

两个Spacer会自动平分标题两侧的剩余空间，确保标题始终处于水平中心，右侧按钮组固定在屏幕右边缘，布局完全自适应屏幕宽度。

方案2：绝对居中（不受右侧元素影响）

如果需要标题绝对居中（即使右侧按钮组宽度变化也不改变标题位置），可以用ZStack实现：

struct AbsoluteCenteredLayout: View {
    var body: some View {
        ZStack(alignment: .trailing) {
            Text("App title")
                .border(Color.blue)
                .frame(maxWidth: .infinity, alignment: .center)
            Group {
                Text("Edit")
                Text("...")
            }
            .border(.yellow)
            .padding(.trailing)
        }
    }
}

ZStack让标题和按钮组叠加显示，标题通过frame(maxWidth: .infinity, alignment: .center)实现绝对居中，按钮组固定在右侧，互不干扰。

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