Swift5.2とiOS13.4では、必要に応じて、次の例のいずれかを使用してVStack、主要な制約とフルサイズのフレームに合わせることができます。
以下のコードスニペットはすべて同じ表示になりますが、ビュー階層のデバッグ中に表示される可能性のVStackあるView要素の有効なフレームや数を保証するものではないことに注意してください。
1.frame(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)方法を使用する
最も簡単なアプローチはVStack、最大の幅と高さでフレームを設定し、必要な配置をframe(minWidth:idealWidth:maxWidth:minHeight:idealHeight:maxHeight:alignment:)次のように渡すことです。
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: .topLeading
)
.background(Color.red)
}
}
別の方法として、Viewsに特定の配置で最大フレームを設定することがコードベースの一般的なパターンである場合は、その上に拡張メソッドを作成できますView。
extension View {
func fullSize(alignment: Alignment = .center) -> some View {
self.frame(
maxWidth: .infinity,
maxHeight: .infinity,
alignment: alignment
)
}
}
struct ContentView : View {
var body: some View {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.fullSize(alignment: .topLeading)
.background(Color.red)
}
}
2.sを使用してSpacer位置合わせを強制します
VStack内側をフルサイズで埋め込み、HStackトレーリングとボトムを使用してSpacer、VStackトップリーディングアライメントを強制することができます。
struct ContentView: View {
var body: some View {
HStack {
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
Spacer()
}
Spacer()
}
.frame(
maxWidth: .infinity,
maxHeight: .infinity
)
.background(Color.red)
}
}
3.ZStackとフルサイズの背景を使用するView
この例は、トップリーディングアライメントを持つVStack内部に埋め込む方法を示していますZStack。Colorビューを使用して最大の幅と高さを設定する方法に注意してください。
struct ContentView: View {
var body: some View {
ZStack(alignment: .topLeading) {
Color.red
.frame(maxWidth: .infinity, maxHeight: .infinity)
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
}
}
}
4.使用する GeometryReader
GeometryReader次の宣言があります：
コンテンツを独自のサイズと座標空間の関数として定義するコンテナビュー。[...]このビューは、親レイアウトに柔軟な優先サイズを返します。
以下のコードスニペットは、トップリーディング制約とフルサイズフレームGeometryReaderに合わせるために使用する方法を示していますVStack。
struct ContentView : View {
var body: some View {
GeometryReader { geometryProxy in
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
}
.frame(
width: geometryProxy.size.width,
height: geometryProxy.size.height,
alignment: .topLeading
)
}
.background(Color.red)
}
}
5.overlay(_:alignment:)メソッドの使用
VStack既存のフルサイズの上に最上位の制約を揃えたい場合はView、次のoverlay(_:alignment:)方法を使用できます。
struct ContentView: View {
var body: some View {
Color.red
.frame(
maxWidth: .infinity,
maxHeight: .infinity
)
.overlay(
VStack(alignment: .leading) {
Text("Title")
.font(.title)
Text("Content")
.font(.body)
},
alignment: .topLeading
)
}
}
表示：
