SwiftUI 官方教程（三）

3. 用 Stacks 組合 View

在上一節建立標題 view 後，咱們來添加 text view，它用來顯示地標的詳細信息，好比公園的名稱和所在的州。

在建立 SwiftUI view 時，咱們能夠在 view 的 body 屬性中描述其內容、佈局和行爲。因爲 body屬性僅返回單個 view，因此咱們能夠使用 Stacks 來組合和嵌入多個 view，讓它們以水平、垂直或從後到前的順序組合在一塊兒。

在本節中，咱們使用水平的 stack 來顯示公園的詳細信息，再用垂直的 stack 將標題放在詳細信息的上面。

咱們能夠使用 Xcode 的編輯功能將 view 嵌入到一個容器裏，也能夠使用 inspector 或者 help 找到更多幫助。

3.1 按住 Command 並單擊 text view 的初始化方法，在編輯窗口中選擇 Embed in VStack 。

接下來，咱們從 Library 中拖一個 Text view 添加到 stack 中。

3.2 單擊 Xco​​de 右上角的加號按鈕 (+) 打開 Library ，而後拖一個 Text view ，放在代碼中 Turtle Rock 的後面。

3.3 將 Placeholder 改爲 Joshua Tree National Park 。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

調整地點 view 以知足佈局需求。

SwiftUI教程

3.4 將地點 view 的 font 設置成 .subheadline 。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                .font(.subheadline)
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 SwiftUI教程

3.5 編輯 VStack 的初始化方法，將 view 以 leading 方式對齊。

默認狀況下， stacks 會將內容沿其軸居中，並設置適合上下文的間距。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                .font(.subheadline)3
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

接下來，咱們在地點的右側添加另外一個 text view 來顯示公園所在的州。

3.6 在 canvas 中按住 Command ，單擊 Joshua Tree National Park ，而後選擇 Embed in HStack 。

3.7 在地點後新加一個 text view，將 Placeholder 修改爲 California ，而後將 font 設置成 .subheadline 。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Text("California")
                    .font(.subheadline)
            }
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

SwiftUI教程

3.8 在水平 stack 中添加一個 Spacer 來分割及固定 Joshua Tree National Park 和 California ，這樣它們就會共享整個屏幕寬度。

spacer 能展開它包含的 view ，使它們共用其父 view 的全部空間，而不是僅經過其內容定義其大小。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

3.9 最後，用 .padding() 這個修飾方法給地標的名稱和信息留出一些空間。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

SwiftUI 官方教程（四）

SwiftUI 官方教程（二）