SwiftUI工具栏图片居中问题：如何让中间图片精准居中？

我用HStack做工具栏，左侧是一个按钮，中间是图片，右侧是包含两个按钮的HStack。整体布局正常，但中间图片略微偏左，怎么让它精准居中？

原代码如下：

var toolbar: some View {
        HStack(alignment: .center) {
            Button {
                UIImpactFeedbackGenerator(style: .light).impactOccurred()
                presentationMode.wrappedValue.dismiss()
            } label: {
                Image(systemName: "xmark")
                    .tint(.black)
            }
            Spacer()
            Image("nav_logo")
                .resizable()
                .frame(width: 30, height: 30)
            
            Spacer()
            optionsButton
        }
        .frame(height: 30)
    }

var optionsButton: some View {
        HStack {
            Button {
                UIPasteboard.general.string = viewModel.take.shareLinkString
                self.buildBottomAlert(type: .linkCopied)
            } label: {
                 Image("shareIcon")
            }
            .padding(.trailing, 10)
            
            Button {
                showingAlert = true
            } label: {
                Image("moreMenu")
            }
}

问题根源是左右两侧元素宽度不一致：左侧是单个按钮，右侧是带间距的两个按钮，导致两个Spacer()分配的空间不对等，图片因此偏左。以下是两种可行的解决方法：

方法一：强制左右元素宽度相等 #

给左侧按钮和右侧的optionsButton设置相同的固定宽度，让Spacer()均分剩余空间，实现图片精准居中：

var toolbar: some View {
    HStack(alignment: .center) {
        Button {
            UIImpactFeedbackGenerator(style: .light).impactOccurred()
            presentationMode.wrappedValue.dismiss()
        } label: {
            Image(systemName: "xmark")
                .tint(.black)
        }
        .frame(width: 60) // 与右侧元素宽度匹配
        
        Spacer()
        
        Image("nav_logo")
            .resizable()
            .frame(width: 30, height: 30)
        
        Spacer()
        
        optionsButton
            .frame(width: 60) // 匹配左侧宽度
    }
    .frame(height: 30)
}

var optionsButton: some View {
    HStack(spacing: 10) { // 将padding改为HStack的spacing更规范
        Button {
            UIPasteboard.general.string = viewModel.take.shareLinkString
            self.buildBottomAlert(type: .linkCopied)
        } label: {
             Image("shareIcon")
        }
        
        Button {
            showingAlert = true
        } label: {
            Image("moreMenu")
        }
    }
}

方法二：用ZStack实现绝对居中 #

通过ZStack让图片直接居于工具栏中心，左右元素叠加在上方，无需考虑宽度匹配：

var toolbar: some View {
    ZStack(alignment: .center) {
        // 中间居中的logo
        Image("nav_logo")
            .resizable()
            .frame(width: 30, height: 30)
        
        // 左右操作按钮的容器
        HStack(alignment: .center) {
            Button {
                UIImpactFeedbackGenerator(style: .light).impactOccurred()
                presentationMode.wrappedValue.dismiss()
            } label: {
                Image(systemName: "xmark")
                    .tint(.black)
            }
            
            Spacer()
            
            optionsButton
        }
    }
    .frame(height: 30)
}

var optionsButton: some View {
    HStack(spacing: 10) {
        Button {
            UIPasteboard.general.string = viewModel.take.shareLinkString
            self.buildBottomAlert(type: .linkCopied)
        } label: {
             Image("shareIcon")
        }
        
        Button {
            showingAlert = true
        } label: {
            Image("moreMenu")
        }
    }
}

两种方法对比 #

• 方法一适合需要左右元素视觉对称的场景，调整宽度能保证整体布局平衡；
• 方法二更简洁直接，不管左右元素宽度如何，图片始终严格居中，适合优先保障图片居中的需求。

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