如何修复SwiftUI ZStack添加条件视图后VStack padding失效的问题

问题原因 #

1. ZStack的尺寸默认由所有子视图的最大尺寸决定，你新增的BottomSheetView属于全屏类组件，通常内部会设置撑满父容器、忽略安全区的属性，会把整个ZStack直接撑到和屏幕同等大小。
2. 未添加BottomSheetView时，ZStack的尺寸和VStack完全一致，VStack的.padding(.all,17)可以正常作用，布局符合预期。
3. ZStack默认对齐规则为居中对齐，当ZStack被撑满全屏后，没有设置尺寸约束的VStack会在全屏ZStack中居中展示，不再贴合ZStack边缘，视觉上表现为padding失效。

修复方案 #

根据你的业务需求选择对应方案即可：

• 方案1：让VStack撑满ZStack，保留原有padding
  给VStack添加最大宽高约束，让它撑满整个ZStack，原有padding就能正常生效：

  ZStack{
      VStack{
          // 原有VStack内容
      }
      .frame(maxWidth: .infinity, maxHeight: .infinity)
      .padding(.all,17)
      
      if handler.bottomVisible {
          BottomSheetView(handler: handler, player: true)
      }
  }
  

• 方案2：指定ZStack的对齐规则
  如果不需要VStack撑满全屏，可直接指定ZStack的对齐方式，比如顶部对齐：

  ZStack(alignment: .top) {
      VStack{
          // 原有VStack内容
      }
      .padding(.all,17)
      
      if handler.bottomVisible {
          BottomSheetView(handler: handler, player: true)
      }
  }
  

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