也许我误解了您，但是我尝试了您的示例...不幸的是，它不是可编译的，因此我不得不更改某些内容。但是如您所见，结果（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)
    }
}

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

这种假设是不正确的-默认情况下，堆栈紧紧地容纳内容，而内容紧紧地限制到最小，并且UI元素之间使用默认填充。在提供的代码中，Spacer()有责任扩展到最大可用空间。因此，为了使内容空间最小化，突出显示的VStack应该进行如下更改：

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