SwiftUI中Text元素行数差异引发视图随机边距及高度异常问题

该问题由SwiftUI的两个默认布局规则共同导致：

1. 未显式设置spacing参数的VStack会采用系统自适应间距，会根据子视图类型、文本行数动态调整模块间的间距数值，没有固定规则
2. 单行Text和多行Text的默认容器行高计算逻辑存在差异，会导致标题模块的整体高度和上下间距发生不可控变化

• 显式禁用VStack的自适应间距，将最外层容器修改为指定固定间距为0的模式，所有模块间距完全手动控制：

  // 原代码：VStack(alignment: .leading) {
  VStack(alignment: .leading, spacing: 0) { // 修改后
  

• 固定标题文本的布局规则，消除单行/多行文本的高度差异，按需设置最大行数、最小高度：

  Text(title)
      .bold()
      .font(.system(size: 20, weight: .bold))
      .padding(.vertical, 5)
      .lineLimit(2) // 按产品需求设置最大展示行数
      .fixedSize(horizontal: false, vertical: true) // 保证文本换行时高度自动撑开，单行时高度稳定
      .minHeight(30) // 可根据字号调整，匹配多行文本的最小容器高度
  

• 手动设置所有模块间的固定间距，替换系统默认的自适应间距：
  比如在图片底部加固定padding控制和标题的间距、在标题Group底部加固定padding控制和广告位的间距、在广告位底部加固定padding控制和按钮的间距，所有间距数值明确指定，不要依赖系统默认值。

• 优化图片的布局约束，避免顶部意外留白：
  给图片的frame修饰符添加对齐规则，同时强制顶部无额外间距：

  Image(systemName: "camera")
      .data(url: URL(string: picture)!)
      .resizable()
      .scaledToFill()
      // 增加alignment参数，避免图片缩放时的位置偏移
      .frame(width: UIScreen.main.bounds.width * 0.8, alignment: .center)
      .maxHeight(215)
      .clipped()
      .padding(.top, 0)
  

VStack(alignment: .leading, spacing: 0) {
       Image(systemName: "camera")
           .data(url: URL(string: picture)!)
           .resizable()
           .scaledToFill()
           .frame(width: UIScreen.main.bounds.width * 0.8, alignment: .center)
           .maxHeight(215)
           .clipped()
           .padding(.bottom, 12) // 手动指定图片和标题的间距
       Group {
           HStack {
               Text(title)
                   .bold()
                   .font(.system(size: 20, weight: .bold))
                   .padding(.vertical, 5)
                   .lineLimit(2)
                   .fixedSize(horizontal: false, vertical: true)
                   .minHeight(30)
               Spacer()
           }
           HStack {
               Text(subInformation)
                   .font(.system(size: 17, weight: .semibold))
                   .foregroundColor(Color.red)
                   .padding(.bottom, 5)
               Spacer()
           }
           HStack {
               Text(description)
                   .padding(.bottom, 2)
                   .foregroundColor(Color.gray)
               Spacer()
           }
       }.padding(.horizontal)
       .padding(.bottom, 10) // 手动指定标题组和广告位的间距
       DestinationAd()
           .frame(width: UIScreen.main.bounds.width * 0.8, height: 50)
           .padding(.bottom, 10) // 手动指定广告位和按钮的间距
       Link(destination: URL(string: urlToOpen)!, label: {
           HStack {
               Spacer()
               Text("See more")
                   .padding(.vertical, 5)
               Spacer()
           }.background(Color.blue)
           .cornerRadius(10)
       }).padding(.horizontal, 10)
       .padding(.bottom, 10)
   }.frame(width: UIScreen.main.bounds.width * 0.8)
   .background(Color.white)
   .cornerRadius(20)

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