是否可以在 Swift UI 中获得 VStack 的计算“最小”高度

Posted 2023-02-25

【中文标题】是否可以在 Swift UI 中获得 VStack 的计算“最小”高度

【英文标题】：Is it possible to get the calculated "minimum" height for a VStack in Swift UI

【发布时间】：2020-06-08 02:05:45

【问题描述】：

我正在使用类似卡片的视图，我基本上想知道容纳元素所需的最小高度，然后在其周围添加边框。

这变得很困难，因为 VStack 和 HStack 似乎想要尽可能多地占用空间，所以我需要手动插入 .frame(...) 来强制它工作，但这使得它非常不灵活。

在图片中，我突出显示了VStack，正如您所见，它超出了 48px 帧高度的限制。

代码

var body: some View 
    HStack(spacing: 0) 
      Image("cocktail")
        .resizable()
        .scaledToFit()
        .padding(Size.Spacing.unit * 2)
        .background(self.color)
        .cornerRadius(8)
        .overlay(
          RoundedRectangle(cornerRadius: 8)
            .stroke(self.color)
      )


      HStack(spacing: 0) 
        VStack(alignment: .leading) 
          Text("Negroni").font(.headline)
          Spacer()
          HStack 
            Tag(name: "bitter")
            Tag(name: "sweet")
            Tag(name: "strong")
          
        
        .padding(.leading, 10)
        Spacer()
      
    
    .padding(Size.Spacing.unit * 2)
    .frame(height: 48.0)
  

【参考方案1】：

也许我误解了你，但我试过你的例子......不幸的是它不可编译，所以我不得不改变一些东西。但是您可以看到结果（vstack - 黄色）并没有占用太多空间，可能是因为您的填充？

struct ContentView: View 
    var body: some View 
      HStack(spacing: 0) 
        Image("cocktail")
          .resizable()
          .scaledToFit()
      //    .padding(Size.Spacing.unit * 2)
            .background(Color.blue)
          .cornerRadius(8)
          .overlay(
            RoundedRectangle(cornerRadius: 8)
                .stroke(Color.yellow)
        )


        HStack(spacing: 0) 
          VStack(alignment: .leading) 
            Text("Negroni").font(.headline)
            Spacer()
            HStack 
              Text("bitter")
              Text("sweet")
              Text("strong")
            
          
          .background(Color.yellow)
          .padding(.leading, 10)
          Spacer()
        .background(Color.red)
      
   //   .padding(Size.Spacing.unit * 2)
      .frame(height: 48.0)
    

【讨论】：

谢谢，这好多了，但不完全是我想要做的。让我重新表述一下。这可以确保文本不会占用太多空间，但我也希望蓝色图像填充到最小高度。理想情况下，.frame(height: 40) 没有被硬编码

【参考方案2】：

因为 VStack 和 HStack 似乎想要尽可能多地占用空间

这个假设是不正确的——默认情况下，堆栈对内容很紧，内容紧到最小，UI 元素之间有默认填充。在提供的代码中，Spacer() 负责扩展至最大可用空间。因此，为了使内容空间最小化，突出显示的VStack 应更改如下：

VStack(spacing: 0, alignment: .leading) 
  Text("Negroni").font(.headline)
  HStack 
    Tag(name: "bitter")
    Tag(name: "sweet")
    Tag(name: "strong")