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

Question

我正在使用類似卡片的視圖，並且我基本上想知道容納元素所需的最小高度，然后在其周圍添加邊框。

這變得很困難，因為 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)
  }

Answer 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)
    }
}

Answer 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")
  }
}

Answer 3

您是否嘗試過 .fixedSize() 修飾符，這對您有用嗎？