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

Posted 2023-03-13

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

【英文标题】：How to stop SwiftUI change the fixed padding when we switch button content between Text and Image?

【发布时间】：2020-07-28 15:41:50

【问题描述】：

所以我在屏幕底部有两个按钮，按钮 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()
    

【参考方案1】：

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

struct SwiftUIView: View 
    var body: some View 
    
      VStack(spacing: 0)     // << here !!
        // .. other code