SwiftUI使图像在视图之间居中

Question

我有一个HStack，我正在用它作为工具栏。HStack在左边包含一个按钮，图像在中间，然后是另一个包含2个按钮的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")
}
}

Answer 1

中间的图像是偏移的，因为第一个按钮和optionsButton的宽度不相同。但是包含Stack的Spacer的宽度是相等的。

为了解决这个问题，你可以把它们包在一个足够大的容器里，这样两个容器的宽度都相同。

例如：

//GeometryReader to get the size of the container this is in
GeometryReader{proxy in
HStack(alignment: .center) {
//Hstack to wrap the button
HStack(){
Button {
UIImpactFeedbackGenerator(style: .light).impactOccurred()
presentationMode.wrappedValue.dismiss()
} label: {
Image(systemName: "xmark")
.tint(.black)
}
// Spacer to move the button to the left
Spacer()
}
// depending on the use case you would need to tweak this value
.frame(width: proxy.size.width / 4)
Spacer()
Image(systemName: "square.and.arrow.up.trianglebadge.exclamationmark")
.resizable()
.frame(width: 30, height: 30)

Spacer()
HStack(){
Spacer()
optionsButton
}
.frame(width: proxy.size.width / 4)
}
.frame(height: 30)
}