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 官方教程（二）