SwiftUI布局问题：HStack居中与Bell图标右对齐异常

原代码的问题在于外层HStack没有撑满屏幕宽度，导致切换器和Bell图标挤在一起，没法实现居中+右对齐的效果。按照下面的修改就能解决：

修改要点 #

• 给外层HStack添加frame(maxWidth: .infinity)，让它占据整个屏幕宽度
• 在切换器容器和Bell图标之间插入Spacer()，利用Spacer的弹性空间把切换器推到屏幕中央，Bell图标推到最右侧
• 移除Bell图标上无效的listRowInsets和frame(alignment: .trailing)，这些属性在当前布局上下文里不起作用

修改后的完整代码 #

var body: some View {
    ZStack {
        // 底部内容视图
        if top == 0 {
            UserFeedView()
        } else {
            MapView()
        }
        
        VStack {
            Spacer().frame(maxHeight: 80)
            
            // 外层HStack撑满宽度
            HStack {
                // 切换器容器
                HStack(spacing: 20) {
                    Button(action: {
                        top = 0
                    }) {
                        Text("Feed")
                            .foregroundColor(top == 0 ? .black : Color.black.opacity(0.45))
                            .fontWeight(top == 0 ? .bold : .none)
                            .padding(.vertical)
                    }
                    
                    Text("|")
                        .font(.system(size:20))
                        .foregroundColor(Color.black.opacity(0.3))
                    
                    Button(action: {
                        top = 1
                    }) {
                        Text("Map")
                            .foregroundColor(top == 1 ? .black : Color.black.opacity(0.45))
                            .fontWeight(top == 1 ? .bold : .none)
                            .padding(.vertical)
                    }
                }
                .padding(.horizontal, 23)
                .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 16.0))
                
                // 插入Spacer把Bell挤到右侧
                Spacer()
                
                Image(systemName: "bell")
            }
            // 让外层HStack撑满屏幕宽度
            .frame(maxWidth: .infinity)
            .padding(.horizontal) // 可选：给Bell图标加左右边距，避免贴边
            
            Spacer()
        }
        .ignoresSafeArea()
    }
}

额外优化（可选） #

如果不想Bell图标完全贴屏幕右边缘，可以给外层HStack加上.padding(.horizontal)，让它和屏幕边缘保持一点距离，视觉效果更舒服。

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