基礎レイアウトコンテナ#
Stack#
SwiftUI において、Stackは基本的なビューコンテナであり、他のビューを配置およびレイアウトするために使用されます。Stack内のすべての子ビューは、水平または垂直方向に配置されます。HStackを使用して水平方向のStackを作成し、VStackを使用して垂直方向のStackを作成することができ、またZStackを使用して階層関係のあるStackを作成することもできます。
VStack#
SwiftUI において、VStackは他のビューを垂直方向に配置するための基本的なビューコンテナです。VStackは任意の数の子ビューを含むことができ（実際には上限がありますが、Group を使用することでこの制限を回避できます）、これらの子ビューは上から下の順序で配置されます。
以下はシンプルなVStackの例です：
struct ContentView: View {
var body: some View {
VStack {
Text("First")
Text("Second")
Text("Third")
}
}
}
この例では、VStackは 3 つのTextビューを含み、それらは上から下の順序で配置されています。
基本的なレイアウトに加えて、VStackはビューの外観や動作をカスタマイズするための多くのオプションや修飾子をサポートしています。以下は一般的なオプションと修飾子のいくつかです：
alignment：子ビューの垂直方向の整列方法を指定します。デフォルトでは、子ビューは垂直中心に整列しますが、alignmentオプションを使用して、.leading、.trailing、.top、.bottomなどの他の整列方法を指定できます。spacing：子ビュー間の間隔を指定します。デフォルトでは、子ビュー間に間隔はありませんが、spacingオプションを使用して間隔を追加できます。例えば、VStack(spacing: 10)は各子ビュー間に 10 ポイントの間隔を追加します。padding：VStackの内側の余白を指定します。デフォルトでは、VStackには内側の余白はありませんが、paddingオプションを使用して内側の余白を追加できます。例えば、VStack().padding(10)はVStackの外側に 10 ポイントの内側の余白を追加します。
VStackに複数のビューを含めると、それらのサイズや位置が他のビューの影響を受ける可能性があることに注意が必要です。このような場合、Spacerビューを使用して追加のスペースを占有したり、GeometryReaderを使用して親ビューのサイズを取得し、必要に応じて子ビューを調整することができます。
HStack#
VStackと似ており、違いは方向にのみ現れます。以下はシンプルなHStackの例です：
struct ContentView: View {
var body: some View {
HStack {
Text("First")
Text("Second")
Text("Third")
}
}
}
この例では、HStackは 3 つのTextビューを含み、それらは左から右の順序で配置されています。
HStackの一般的なオプションと修飾子はVStackと似ています：
alignment：子ビューの水平方向の整列方法を指定します。デフォルトでは、子ビューは水平方向の中心に整列しますが、alignmentオプションを使用して、.leading、.trailing、.top、.bottomなどの他の整列方法を指定できます。spacing：子ビュー間の間隔を指定します。デフォルトでは、子ビュー間に間隔はありませんが、spacingオプションを使用して間隔を追加できます。例えば、HStack(spacing: 10)は各子ビュー間に 10 ポイントの間隔を追加します。padding：HStackの内側の余白を指定します。デフォルトでは、HStackには内側の余白はありませんが、paddingオプションを使用して内側の余白を追加できます。例えば、HStack().padding(10)はHStackの外側に 10 ポイントの内側の余白を追加します。
ZStack#
SwiftUI において、ZStackは他のビューを垂直方向に重ねるための基本的なビューコンテナです。ZStackは任意の数の子ビューを含むことができ、これらの子ビューは前から後ろの順序で重ねられ、レイヤーのようになります。以下はシンプルなZStackの例です：
struct ContentView: View {
var body: some View {
ZStack {
Image("background")
Text("Hello, World!")
}
}
}
この例では、ZStackは 1 つのImageビューと 1 つのTextビューを含み、それらは重ねられています。TextビューはImageビューの前にあるため、最上部に表示されます。
基本的な重ね合わせに加えて、ZStackはビューの外観や動作をカスタマイズするための多くのオプションや修飾子をサポートしています。以下は一般的なオプションと修飾子のいくつかです：
alignment：子ビューの垂直方向の整列方法を指定します。デフォルトでは、子ビューは垂直中心に整列しますが、alignmentオプションを使用して、.leading、.trailing、.top、.bottomなどの他の整列方法を指定できます。background：ZStackの背景ビューを指定します。デフォルトでは、ZStackには背景ビューはありませんが、backgroundオプションを使用して背景ビューを追加できます。例えば、ZStack().background(Color.blue)はZStackの後ろに青色の背景を追加します。overlay：ZStackの上にオーバーレイビューを追加します。デフォルトでは、ZStackにはオーバーレイビューはありませんが、overlayオプションを使用してオーバーレイビューを追加できます。例えば、ZStack().overlay(Text("Overlay"))はZStackの上にオーバーレイビューを追加します。
ZStackに複数のビューを含めると、それらのサイズや位置が他のビューの影響を受ける可能性があることに注意が必要です。このような場合、Spacerビューを使用して追加のスペースを占有したり、GeometryReaderを使用して親ビューのサイズを取得し、必要に応じて子ビューを調整することができます。
LazyVStack#
LazyVStack は SwiftUI において垂直レイアウトのためのビューです。LazyVStack は VStack に似ていますが、パフォーマンスが向上し、メモリ使用量が少なくなります。なぜなら、必要なときにのみ子ビューを読み込み表示するからです。LazyVStack は通常、大量の子ビューを表示するために使用されます。以下は LazyVStack を作成する基本的な構文です：
LazyVStack(alignment: HorizontalAlignment = .center, spacing: CGFloat? = nil, pinnedViews: PinnedScrollableViews = .init(), @ViewBuilder content: () -> Content)
ここで、alignmentパラメータは子ビューの垂直軸での整列方法（.top、.center、.bottomなど）を指定し、spacingパラメータは子ビュー間の間隔を指定し、pinnedViewsパラメータはScrollViewの上部または下部に固定するビューを指定し、contentパラメータはLazyVStackに表示する内容を返すクロージャです。
例えば、以下のコードは 10 個のテキストビューを含むシンプルなLazyVStackを作成します：
LazyVStack {
ForEach(1...10, id: \.self) { index in
Text("Item \(index)")
}
}
この例では、ForEachループを使用して 10 個のテキストビューを作成し、それらをLazyVStackに追加しています。LazyVStackは「遅延」なので、必要なときにのみ動的に各テキストビューを読み込み表示します。これにより、パフォーマンスが向上し、メモリ使用量が削減されます。
LazyHStack#
LazyHStackは SwiftUI のビューコンテナであり、水平方向に一連のビューを配置するために使用されます。HStackとは異なり、LazyHStackは必要なときにのみ子ビューをインスタンス化します。これにより、パフォーマンスが向上し、メモリ使用量が削減されます。
以下はLazyHStackの一般的な使い方のいくつかです：
- 一連のビューを配置する：水平方向に一連のビューを配置する必要がある場合、
LazyHStackを使用してそれらをコンテナに配置できます。これにより、ビューのレイアウトが容易になり、必要に応じて遅延読み込みを行うことでパフォーマンスとメモリ使用効率が向上します。
例えば、ビュー内に一連のボタンを配置する必要がある場合、LazyHStackを使用してそれらを水平コンテナに配置し、必要に応じて遅延読み込みを行うことができます。
LazyHStack {
Button("Button 1") {
// 何かをする
}
Button("Button 2") {
// 何かをする
}
Button("Button 3") {
// 何かをする
}
}
- 大量のビューのレイアウトをサポートする：ビュー内に大量のビューを配置する必要がある場合、
LazyHStackを使用して遅延読み込みを行うことで、パフォーマンスとメモリ使用効率を向上させることができます。これは、大量のデータを表示する必要があるアプリケーションに非常に役立ちます。例えば、ソーシャルメディアアプリやニュースアプリなどです。
例えば、ビュー内に一連の画像を表示する必要がある場合、LazyHStackを使用してそれらを水平コンテナに配置し、必要に応じて遅延読み込みを行うことができます。
LazyHStack {
ForEach(0..<100) { index in
Image("image\(index)")
.resizable()
.frame(width: 50, height: 50)
}
}
要するに、LazyHStackは SwiftUI でビューをより簡単にレイアウトおよび管理し、パフォーマンスとメモリ使用効率を向上させるのに役立ちます。水平方向に一連のビューを配置し、必要に応じて遅延読み込みを行いたい場合、LazyHStackは非常に便利なビューコンテナです。
Grid#
SwiftUI では、LazyVGrid、LazyHGrid、およびLazyGridの 3 つのビューコンテナを使用してグリッドレイアウトを作成できます。これらのコンテナは、多くのビューを配置およびレイアウトするための便利な方法を提供し、テーブル、フォトウォール、映画ポスター、その他の複雑なレイアウトを簡単に作成できます。
以下は SwiftUI でグリッドレイアウトを使用する一般的な方法と例です：
LazyVGrid#
垂直グリッドレイアウト：LazyVGridコンテナを使用して垂直方向のグリッドレイアウトを作成できます。LazyVGrid内では、列数、行間の間隔、およびセル間の間隔を指定できます。
struct ContentView: View {
let columns = [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 16) {
ForEach(0 ..< 10) { index in
Text("Item \(index)")
.frame(height: 100)
}
}
.padding()
}
}
}
LazyHGrid#
水平グリッドレイアウト：LazyHGridコンテナを使用して水平方向のグリッドレイアウトを作成できます。LazyHGrid内では、行数、列間の間隔、およびセル間の間隔を指定できます。
struct ContentView: View {
let rows = [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
]
var body: some View {
ScrollView(.horizontal) {
LazyHGrid(rows: rows, spacing: 16) {
ForEach(0 ..< 10) { index in
Text("Item \(index)")
.frame(width: 200, height: 100)
}
}
.padding()
}
}
}
LazyGrid#
カスタムグリッドレイアウト：LazyGridコンテナを使用してカスタムグリッドレイアウトを作成できます。LazyGrid内では、行数、列数、行間の間隔、列間の間隔を指定し、各セルのサイズや位置をカスタマイズできます。
struct ContentView: View {
let columns = [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
]
var body: some View {
ScrollView {
LazyVGrid(columns: columns, spacing: 16) {
ForEach(0 ..< 10) { index in
Text("Item \(index)")
.frame(height: CGFloat.random(in: 50...200))
.background(Color.blue)
.cornerRadius(8)
.overlay(
Text("\(index)")
.foregroundColor(.white)
)
}
}
.padding()
}
}
}
ScrollView#
基本的な使い方#
ScrollView は SwiftUI でスクロール可能なコンテンツを表示するためのビューです。ScrollView は垂直または水平方向にスクロールでき、スクロールジェスチャーやスクロールバーをサポートしています。ScrollView は、テキスト、画像、リストなど、さまざまなタイプのコンテンツを表示するために使用できます。
以下は ScrollView を作成する基本的な構文です：
struct ContentView: View {
var body: some View {
ScrollView {
VStack {
ForEach(0..<50) { index in
Text("Row \(index)")
}
}
}
}
}
ScrollView 内では、テキストビュー、画像ビュー、リストビューなど、任意の数のビューを追加できます。ScrollView は自動的にこれらのビューをスクロール可能なコンテナに包み、コンテンツに応じてサイズや位置を自動的に調整します。
例えば、以下のコードはテキストビューを含むシンプルな ScrollView を作成します：
ScrollView {
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel ante ac lorem bibendum semper. Nulla facilisi. Sed quis risus nec risus bibendum tempus. Nam luctus hendrerit eros, a tempor augue pharetra vel. Donec at risus vitae velit malesuada egestas.")
}
この例では、ScrollView は自動的にテキストビューをスクロール可能なコンテナに包み、テキストの長さに応じてサイズや位置を自動的に調整します。ユーザーはジェスチャーでテキストビューをスクロールしたり、スクロールバーを使用してスクロール位置を制御したりできます。
一般的な修飾子#
以下はScrollViewの一般的な修飾子のいくつかです：
- scrollIndicatorInsets(_ :): スクロールインジケーターの余白を設定します。この修飾子は、EdgeInsets 型のパラメータを受け取り、上部、下部、左側、右側の余白を指定します。
- showsIndicators(_ :): スクロールインジケーターを表示するかどうかを制御します。この修飾子は、ブール値型のパラメータを受け取り、デフォルト値は true で、スクロールインジケーターを表示します。false に設定すると、スクロールインジケーターは表示されません。
- onOffsetChange(_ :): ScrollView がスクロールする際にカスタム操作を実行します。この修飾子は、現在のオフセット値を含むクロージャ型のパラメータを受け取ります。この修飾子を使用して、特定の位置にスクロールしたときに特定の操作を実行するなどのカスタムスクロール動作を実現できます。
- contentInsets(_ :): ScrollView のコンテンツの余白を設定します。この修飾子は、EdgeInsets 型のパラメータを受け取り、上部、下部、左側、右側の余白を指定します。
- contentOffset(_ :): ScrollView の初期オフセットを設定します。この修飾子は、CGPoint 型のパラメータを受け取り、ScrollView の初期オフセットを指定します。
- background(_ :): ScrollView の背景を設定します。この修飾子は、View 型のパラメータを受け取り、ScrollView の背景ビューを指定します。
- overlay(_ :): ScrollView の上にオーバーレイビューを追加します。この修飾子は、View 型のパラメータを受け取り、ScrollView の上に追加するオーバーレイビューを指定します。
- ignoresSafeArea(_ edges: Edge.Set): ScrollView が安全領域を無視するかどうかを制御します。この修飾子は、無視する安全領域のエッジを指定する Edge.Set 型のパラメータを受け取ります。
- content(_ :): ScrollView のコンテンツビューを指定します。この修飾子は、View 型のパラメータを受け取り、ScrollView のコンテンツビューを指定します。
Spacer#
Spacerは SwiftUI のビュー修飾子であり、ビュー内にプレースホルダーを作成してレイアウト中にスペースを占有するために使用されます。Spacerを使用すると、自動的に残りの利用可能なスペースを埋め、ビューをコンテナの端に押しやります。
以下はSpacerの一般的な使い方のいくつかです：
VStackまたはHStack内でSpacerを使用する：VStackまたはHStack内にSpacerを配置すると、前のビューをコンテナの上部または左側に押しやり、後のビューをコンテナの下部または右側に押しやります。これにより、コンテナ内で適応的なレイアウトを作成できます。
例えば、VStack内に固定高さのタイトルと適応的高さのテキストビューを作成したい場合、それらの間にSpacerを追加できます。これにより、テキストビューが自動的に残りの利用可能なスペースを埋め、コンテナの底に押しやられます。
VStack {
Text("Title")
.font(.largeTitle)
.frame(height: 100)
Spacer()
Text("This is a long text that should wrap over several lines and fill the remaining space in the container.")
}
ZStack内でSpacerを使用する：ZStack内にSpacerを配置すると、前のビューを前面に押しやり、後のビューを背面に押しやり、自動的に残りの利用可能なスペースを占有します。これにより、ZStack内で適応的なレイアウトを作成できます。
例えば、ZStack内に固定サイズの円形画像と適応サイズの矩形ビューを作成したい場合、それらの間にSpacerを追加できます。これにより、矩形ビューが自動的に残りの利用可能なスペースを埋め、円形画像の周りに押しやられます。
ZStack {
Circle()
.fill(Color.blue)
.frame(width: 100, height: 100)
Spacer()
Rectangle()
.fill(Color.red)
.frame(maxWidth: .infinity, maxHeight: .infinity)
}
要するに、Spacerは SwiftUI で適応的なレイアウトを作成するのに役立ち、ビューが自動的に残りの利用可能なスペースを埋めることで、より柔軟で動的なレイアウト効果を実現します。
Group#
Groupは SwiftUI のコンテナビューであり、複数のビューをまとめてグループ化するために使用されます。ビュー階層内に新しいビュー階層を作成することはなく、内部のビューを一組のビューとして処理します。
以下はGroupの一般的な使い方のいくつかです：
- 複数のビューをまとめる：複数のビューをまとめる必要がある場合、
Groupを使用してそれらをコンテナにラップできます。これにより、コード内でビューをより良く整理し、読みやすく保守しやすくなります。
例えば、ビュー内に複数のボタンを表示する必要がある場合、これらのボタンをGroupに配置することで、全体として処理でき、必要に応じてスタイルやレイアウトの変更が容易になります。
Group {
Button("Button 1") {
// 何かをする
}
Button("Button 2") {
// 何かをする
}
Button("Button 3") {
// 何かをする
}
}
- ビューをグループ化する：ビューをグループ化する必要がある場合、
Groupを使用してそれらをコンテナにラップできます。これにより、類似のビューを簡単に整理し、全体として処理できます。
例えば、ビュー内に複数のテキストラベルを表示する必要がある場合、それらをGroupにまとめて、そのグループにスタイルやレイアウト属性を追加できます。これにより、コードがより整理され、保守が容易になります。
Group {
Text("Label 1")
Text("Label 2")
Text("Label 3")
}
.font(.largeTitle)
.padding()
要するに、Groupは SwiftUI でビューをより良く整理し管理するのに役立ち、コードをより読みやすく保守しやすくします。非常にシンプルですが実用的なコンテナビューであり、コードをより簡潔で可読性の高いものにします。
ネストされたレイアウト#
SwiftUI では、ビューコンテナをネストすることで複雑なレイアウトを作成できます。これにより、複数のコンテナを使用でき、各コンテナが一組のビューを管理します。これにより、ビューを組み合わせてレイアウトしやすくなり、必要に応じて遅延読み込みを行うことでパフォーマンスとメモリ使用効率を向上させることができます。
以下は SwiftUI で一般的なネストされたレイアウトの例です：
- 垂直と水平レイアウトの組み合わせ：
VStackとHStackの組み合わせを使用して、垂直と水平のレイアウトを混合できます。これは、ビューを水平方向と垂直方向に配置する必要があるアプリケーションに非常に役立ちます。例えば、フォームやツールバーなどです。
VStack {
HStack {
Text("First")
Text("Second")
}
HStack {
Text("Third")
Text("Fourth")
}
}
- ネストされたリスト：リストビューを別のリストまたはビューコンテナにネストして、より複雑なレイアウトを作成できます。これは、階層データを表示する必要があるアプリケーションに非常に役立ちます。例えば、ディレクトリやナビゲーションなどです。
List {
Section(header: Text("Section 1")) {
Text("Item 1")
Text("Item 2")
}
Section(header: Text("Section 2")) {
List {
Text("Nested Item 1")
Text("Nested Item 2")
}
}
}
- ネストされたスクロールビュー：スクロールビューを別のスクロールビューまたはビューコンテナにネストして、より複雑なスクロールレイアウトを作成できます。これは、大量のデータを表示する必要があるアプリケーションに非常に役立ちます。例えば、ニュースやソーシャルメディアなどです。
ScrollView {
VStack {
Image("header-image")
.resizable()
.frame(height: 200)
VStack {
Text("Title")
.font(.largeTitle)
Text("Subtitle")
.font(.headline)
.foregroundColor(.gray)
Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, ligula id gravida rutrum, sem urna volutpat purus, sit amet suscipit ex odio vel arcu. Nulla cursus sollicitudin massa. Etiam quis ex at odio eleifend mollis. Fusce accumsan turpis ac ipsum ultrices, nec lobortis dolor consectetur. Donec sit amet bibendum mi, id vestibulum justo. Sed eget dictum orci. Donec vitae quam ut eros rhoncus faucibus.")
.font(.body)
}
}
}
レイアウト修飾子#
SwiftUI では、レイアウト修飾子を使用してビューの周囲に内側の余白、背景、オーバーレイ画像などを追加できます。以下は一般的なレイアウト修飾子です：
padding(_:)：ビューの周囲に内側の余白を追加します。例えば、Text("Hello World").padding()はTextビューの周囲にデフォルトの内側の余白を追加します。background(_:)：ビューに背景を追加します。例えば、Text("Hello World").background(Color.blue)はTextビューに青色の背景を追加します。border(_:width:)：ビューに境界線を追加します。例えば、Text("Hello World").border(Color.gray, width: 1)はTextビューに灰色の境界線を追加し、幅は 1 です。cornerRadius(_:)：ビューに角丸を追加します。例えば、Text("Hello World").cornerRadius(10)はTextビューに 10 ポイントの角丸を追加します。shadow(_:)：ビューに影を追加します。例えば、Text("Hello World").shadow(color: .gray, radius: 2)はTextビューに灰色の影を追加し、半径は 2 です。overlay(_:)：ビューの上にオーバーレイ画像を追加します。例えば、Text("Hello World").overlay(Image(systemName: "star"))はTextビューの上に星形の画像を追加します。frame(width:height:alignment:)：ビューのフレームサイズと整列方法を指定します。例えば、Text("Hello World").frame(width: 100, height: 50, alignment: .center)はTextビューに幅 100、高さ 50、水平および垂直に中央揃えのフレームを指定します。aspectRatio(_:contentMode:)：ビューにアスペクト比とコンテンツモードを指定します。例えば、Image("photo").aspectRatio(1.5, contentMode: .fit)はImageビューにアスペクト比 1.5 を指定し、画像コンテンツをビューサイズに合わせてスケーリングします。alignmentGuide(_:computeValue:)：レイアウトで使用するカスタム整列ガイドを定義できます。この修飾子は、整列識別子と計算関数の 2 つのパラメータを受け取ります。例えば、VStack(alignment: .leading) { ... }.alignmentGuide(.leading) { d in d[.trailing] }は.leading整列ガイドの位置をその子ビューの.trailingに設定できます。fixedSize()：ビューのサイズをその内容のサイズに指定します。例えば、Text("Hello World").fixedSize()はTextビューにその内容のサイズと等しいサイズを指定します。layoutPriority(_:)：ビューのレイアウト優先度を指定します。レイアウト優先度は、どのビューが優先的にレイアウトされるかを決定するために使用されます。例えば、VStack { Text("Hello").layoutPriority(1); Text("World").layoutPriority(2) }はText("World")ビューがより高いレイアウト優先度を持ち、優先的にレイアウトされることを保証します。offset(_:)：ビューの位置にオフセットを追加します。例えば、Text("Hello World").offset(x: 10, y: 20)はTextビューの位置に x 軸オフセット 10、y 軸オフセット 20 を追加します。rotationEffect(_:anchor:)：ビューに回転効果を追加します。例えば、Text("Hello World").rotationEffect(.degrees(45))はTextビューに 45 度の回転効果を追加します。scaleEffect(_:anchor:)：ビューにスケーリング効果を追加します。例えば、Text("Hello World").scaleEffect(2)はTextビューに 2 倍のサイズのスケーリング効果を追加します。clipped()：ビューをその親ビューの境界ボックス内にトリミングします。例えば、Image("photo").clipped()は画像をその親ビューの境界ボックス内にトリミングします。
レイアウト優先度#
SwiftUI において、レイアウト優先度はレイアウト内でのビューの相対的な位置を決定するために使用されます。レイアウト優先度が高いビューは、レイアウト時に優先的に考慮され、利用可能なスペースが優先的に割り当てられます。すべてのビューのレイアウト優先度が同じ場合、それらは利用可能なスペースを均等に分配されます。
layoutPriority(_:)修飾子を使用してビューにレイアウト優先度を設定できます。この修飾子は、ビューのレイアウト優先度を示す浮動小数点数値をパラメータとして受け取ります。デフォルトでは、すべてのビューのレイアウト優先度は 0 です。
例えば、以下のコードを使用して 2 つのテキストビューにレイアウト優先度を設定できます：
VStack {
Text("First").layoutPriority(1)
Text("Second").layoutPriority(2)
}
上記のコードでは、2 番目のテキストビューがより高いレイアウト優先度を持っているため、利用可能なスペースが最初に割り当てられます。もしそれがより多くのスペースを必要とする場合、優先的に考慮され、できるだけ多くの利用可能なスペースが割り当てられます。一方、最初のテキストビューのレイアウト優先度は低いため、できるだけ少ない利用可能なスペースが割り当てられます。
レイアウト優先度は、子ビューが親ビュー内での相対的な位置を決定するためにのみ使用され、子ビューが画面内での絶対的な位置を決定するためには使用できないことに注意が必要です。より詳細なレイアウト制御が必要な場合は、frame、padding、offsetなどの他のレイアウト修飾子を使用することを検討してください。
自動レイアウト#
SwiftUI において、自動レイアウトは「宣言型レイアウト」と呼ばれる方法を使用して実現されます。この方法では、レイアウトを直接操作するのではなく、ビューの期待される動作を宣言することで、ビューのレイアウトを制御できます。この方法は、HTML と CSS を使用して Web ページを作成する方法に非常に似ています。
SwiftUI の自動レイアウトは、VStack、HStack、ZStack、List、ScrollViewなどの一連の組み込みレイアウトシステムに基づいています。これらのレイアウトシステムはネストして使用でき、修飾子を追加することでその動作をカスタマイズできます。
例えば、以下のコードはVStackとHStackを使用してシンプルなレイアウトを作成します：
VStack {
HStack {
Text("Hello")
Text("World")
}
Text("How are you?")
}
上記のコードでは、VStackとHStackはそれぞれ垂直および水平方向のレイアウトを表しているため、より複雑なレイアウトを作成するためにネストして使用できます。この例では、HStackは 2 つのテキストビューを含み、これらのテキストビューは水平方向に並んでいます。VStackはHStackと 1 つのテキストビューを含み、これらのビューは垂直方向に配置されています。したがって、全体のレイアウトは 3 つのテキストビューを含み、そのうちの 2 つは水平方向に並び、3 つ目は垂直方向に配置されています。
SwiftUI の自動レイアウトは応答的であることに注意が必要です。これは、ビューがその内容や環境に応じて自動的にサイズや位置を調整することを意味します。例えば、デバイスの画面方向が変わると、ビューのレイアウトは新しい方向に適応するために自動的に更新されます。