0

私はカードのようなビューで作業しています。本質的に、要素を収容するために必要な最小の高さを知り、その周りに境界線を追加したいと思います。

VStack と HStack は可能な限り多くのスペースを占有するように見えるため、これは難しくなります。これ.frame(...)を強制的に機能させるには手動で a を挿入する必要がありますが、非常に柔軟性に欠けます。

VStack写真では、ご覧のとおり、48 ピクセルのフレーム高さの制約を超えていっぱいになっている を強調しています。

コード

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