当我们在文本和图像之间切换按钮内容时，如何停止SwiftUI更改固定填充

Question

所以我在屏幕底部有两个按钮，按钮A和按钮B，我需要用文本替换按钮中的图像，所以我们通过更改顶部的Bool来做到这一点。

尽管我们应用了相同的修饰符，按钮B的填充也发生了变化，UI也发生了移动，但文本似乎占据了更多的空间。所需情况：将按钮"图像"更改为"文本"时，按钮A和B不应移动。

import SwiftUI
private var showImage: Bool = true
struct SwiftUIView: View {
var body: some View {

VStack {

Spacer()
Button(action: {
print("CLICK")
}) {
Image(systemName: "a.circle")
.modifier(TestButtonModifier())
}
.padding(10)

Button(action: {
print("CLICK")
}) {
if showImage {
Image(systemName: "b.circle")
.modifier(TestButtonModifier())
} else {
Text("B")
.modifier(TestButtonModifier())
}
}
.padding(10)
} //: VSTACK
}
}
struct TestButtonModifier: ViewModifier {

func body(content: Content) -> some View {
content
.font(.system(size: 52, weight: .regular))
.frame(minWidth: 0, maxWidth: .infinity, maxHeight: 100)
.background(Color.black)
.padding(2)
.foregroundColor(Color.white)
}
}
struct SwiftUIView_Previews: PreviewProvider {
static var previews: some View {
SwiftUIView()
}
}

Answer 1

这是由于VStack的间距，默认情况下，不同的子视图对之间的间距不同，因此指定一些显式(或完全删除，即设置为零(

struct SwiftUIView: View {
var body: some View {

VStack(spacing: 0) {    // << here !!
// .. other code