0

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

这变得很困难，因为 VStack 和 HStack 似乎想要占用尽可能多的空间，所以我需要手动插入 a.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)
  }

在此处输入图像描述

4

2 回答 2

0

也许我误解了你，但我尝试了你的例子......不幸的是它不可编译，所以我不得不改变一些东西。但是正如您所看到的结果（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)
    }
}

在此处输入图像描述

于 2020-06-08T03:21:25.523 回答
0

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

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

VStack(spacing: 0, alignment: .leading) {
  Text("Negroni").font(.headline)
  HStack {
    Tag(name: "bitter")
    Tag(name: "sweet")
    Tag(name: "strong")
  }
}
于 2020-06-08T03:44:23.427 回答