SwiftUI 入門：佈局基礎

基礎佈局容器#

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 包含了三個 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 包含了三個 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 包含了一個 Image 視圖和一個 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 中顯示的內容。

例如，下面的代碼創建了一個簡單的 LazyVStack，其中包含 10 個文本視圖：

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") {
        // do something
    }
    Button("Button 2") {
        // do something
    }
    Button("Button 3") {
        // do something
    }
}

支持大量視圖的佈局：當你需要在一個視圖中放置大量視圖時，可以使用 LazyHStack 來進行懶加載，從而提高性能和內存使用效率。這對於需要展示大量數據的應用程序非常有用，如社交媒體應用程序、新聞應用程序等。

舉個例子，如果你需要在一個視圖中顯示一組圖片，可以使用 LazyHStack 來將它們放置在一個水平容器中，並在需要時進行懶加載。

LazyHStack {
    ForEach(0..<100) { index in
        Image("image\(index)")
            .resizable()
            .frame(width: 50, height: 50)
    }
}

總之，LazyHStack 可以幫助你在 SwiftUI 中更輕鬆地佈局和管理視圖，並提高性能和內存使用效率。如果你需要在水平方向上排列一組視圖，並且希望在需要時進行懶加載，那麼 LazyHStack 是一個非常實用的視圖容器。

Grid#

在 SwiftUI 中，可以使用 LazyVGrid、LazyHGrid 和 LazyVGrid 三種視圖容器來創建網格佈局。這些容器提供了一種方便的方式來排列和佈局許多視圖，可以讓你輕鬆地創建表格、照片牆、電影海報和其他複雜的佈局。

以下是一些 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：當你將 Spacer 放置在 VStack 或 HStack 中時，它會自動將其前面的視圖推到容器的頂部或左側，並將其後面的視圖推到容器的底部或右側。這使得可以在容器中創建自適應的佈局。

舉個例子，如果你想在 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：當你將 Spacer 放置在 ZStack 中時，它會將其前面的視圖推到前面，將其後面的視圖推到後面，並自動佔用剩餘的可用空間。這使得可以在 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") {
        // do something
    }
    Button("Button 2") {
        // do something
    }
    Button("Button 3") {
        // do something
    }
}

對視圖進行分組：當你需要對視圖進行分組時，可以使用 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:)：允許你定義自定義的對齊指南，以便在佈局中使用。這個修飾符接受兩個參數：一個對齊標識符和一個計算函數。例如，VStack(alignment: .leading) { ... }.alignmentGuide(.leading) { d in d[.trailing] } 可以將 .leading 對齊指南的位置設置為其子視圖的 .trailing。
fixedSize()：指定視圖的大小為其內容大小。例如，Text("Hello World").fixedSize() 將為 Text 視圖指定一個大小，該大小等於 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 視圖添加兩倍大小的縮放效果。
clipped()：將視圖修剪為其父視圖的邊界框內。例如，Image("photo").clipped() 將將圖像修剪為其父視圖的邊界框內。

佈局優先級#

在 SwiftUI 中，佈局優先級用於決定視圖在佈局中的相對位置。佈局優先級越高的視圖將在佈局時優先考慮，並優先分配可用空間。如果所有視圖的佈局優先級相同，則它們將平均分配可用空間。

你可以使用 layoutPriority(_:) 修飾符為視圖設置佈局優先級。這個修飾符接受一個浮點數值作為參數，表示視圖的佈局優先級。默認情況下，所有視圖的佈局優先級都是 0。

例如，你可以使用以下代碼為兩個文本視圖設置佈局優先級：

VStack {
    Text("First").layoutPriority(1)
    Text("Second").layoutPriority(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 包含兩個文本視圖，這兩個文本視圖在水平方向上並排排列。VStack 包含一個 HStack 和一個文本視圖，這些視圖在垂直方向上排列。因此，整個佈局包含三個文本視圖，其中兩個在水平方向上並排排列，而第三個在垂直方向上排列。

需要注意的是，SwiftUI 中的自動佈局是響應式的，這意味著視圖將根據其內容和環境自動調整大小和位置。例如，當設備的螢幕方向發生變化時，視圖的佈局將自動更新以適應新的方向。