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