SwiftUI中VStack内LottieSwitch垂直间距过大问题求助

可能的原因及解决方案： #

• 限制HStack的整体高度
  你的HStack可能因内部元素（如Text行高、LottieSwitch固有尺寸）自动撑开额外高度，即便VStack设了spacing:0，HStack自身的高度冗余仍会导致间隙。给每个HStack添加固定高度的frame：

  HStack {
      // 内部元素...
  }
  .frame(height: 55) // 与LottieSwitch的高度匹配
  .padding(.leading, 20)
  .padding(.trailing, 20)
  

• 调整LottieSwitch的布局优先级
  给LottieSwitch添加.layoutPriority(1)，让它优先占据指定高度，避免Text的布局影响整体HStack高度：

  LottieSwitch(animation: .named("On-Toggle"))
        .isOn($fictionToggleIsOff)
        .onAnimation(fromProgress: 0.5, toProgress: 1.0)
        .offAnimation(fromProgress: 0.0, toProgress: 0.5)
        .frame(height: 55)
        .layoutPriority(1)
  

• 检查LottieSwitch内部的默认padding
  部分第三方Lottie开关组件可能自带内部垂直padding，可尝试用.padding(.vertical, 0)强制覆盖：

  LottieSwitch(animation: .named("On-Toggle"))
        // 其他修饰符...
        .padding(.vertical, 0)
  

• 优化VStack的布局约束
  给VStack添加.alignment(.leading)并结合.fixedSize(horizontal: false, vertical: true)，强制VStack仅根据子视图的实际所需高度布局：

  VStack(spacing: 0, alignment: .leading) {
      // 两个HStack...
  }
  .fixedSize(horizontal: false, vertical: true)
  

修改后的完整示例代码： #

VStack(spacing: 0, alignment: .leading) {
    HStack {
        Text("XXX")
            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
        LottieSwitch(animation: .named("On-Toggle"))
              .isOn($fictionToggleIsOff)
              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
              .frame(height: 55)
              .layoutPriority(1)
        Spacer(minLength: 10)
        Text("XXX")
            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
        LottieSwitch(animation: .named("On-Toggle"))
              .isOn($nonfictionToggleIsOff)
              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
              .frame(height: 55)
              .layoutPriority(1)
    }
    .frame(height: 55)
    .padding(.horizontal, 20)
    
    HStack {
        Text("XXX")
            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
        LottieSwitch(animation: .named("On-Toggle"))
              .isOn($paperbackToggleIsOff)
              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
              .frame(height: 55)
              .layoutPriority(1)
        Spacer(minLength: 10)
        Text("XXX")
            .fontAndColorModifier(size: 16, color: .white, fontWeight: "Poppins-Medium")
        LottieSwitch(animation: .named("On-Toggle"))
              .isOn($hardcoverToggleIsOff)
              .onAnimation(fromProgress: 0.5, toProgress: 1.0)
              .offAnimation(fromProgress: 0.0, toProgress: 0.5)
              .frame(height: 55)
              .layoutPriority(1)
    }
    .frame(height: 55)
    .padding(.horizontal, 20)
}

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