嗨，SwiftUI~

時間  2019-11-08
標籤 swiftui 简体版
原文   原文鏈接

解鎖構建UI的新姿式——SwiftUI

注：編程

  • 文中代碼、視頻及圖片素材均來源於官方文檔
  • 本期源碼：官方下載地址

1、建立SwiftUI項目

  • 使用SwiftUI，確保Mac上跑的是macOS 10.15 beta版，或以上版本。
  • Xcode爲11 beta版，或以上版本。

步驟1

打開Xcode，單擊Create a new Xcode project，或選擇File > New > Project。swift

步驟2

選擇iOS菜單下的的Single View App模板，而後單擊Next。bash

步驟3

輸入"Landmarks"（作一個包含各類地標元素的地標集項目）做爲項目名稱，選中Use SwiftUI複選框，Next，選擇在Mac上保存該項目的位置。 app

步驟4

在Xcode左手邊的文件導航器中，單擊選擇ContentView.swift。ide

默認狀況下，SwiftUI會聲明兩個結構體，第一個結構體遵循View協議——用來描述視圖的內容和佈局；第二個結構體聲明該視圖的預覽方式。佈局

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽： ⬇️字體

步驟5

在預覽畫布中，單擊Resume按鈕以顯示預覽。spa

若是畫布不可見，選擇Editor > Editor and Canvas以顯示它。設計

步驟6

在代碼內body屬性裏，將"Hello World"更改成"Hello SwiftUI"。3d

更改body內視圖的屬性，預覽也將實時更新。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        /// "這裏更改成Hello SwiftUI!，便可在預覽中實時顯示。"
        Text("Hello SwiftUI!")
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽： ⬇️



2、自定義文本視圖

更改UI的方式有兩種：1.改代碼；2.改屬性檢查器選項。
不管使用哪一種方式，代碼都會保持更新。

接下來，您將使用屬性檢查器自定義TextView。

步驟1

在預覽畫布中，按住Command鍵的同時單擊"Hello SwiftUI"文本，會彈出可選菜單，點擊Inspect...此選項便可打開文本視圖的屬性檢查器。

注：不一樣的View，對應的不一樣的屬性檢查器內容。

步驟2

如圖，將文本更改成"Turtle Rock"（地名：中文名叫昂裝，位於中國香港），這是將在應用程序中顯示的第一個地標。

步驟3

如圖將字體改成"Title"

步驟4

爲Text添加代碼.color(.green)，將文本改成綠色。

SwiftUI中，.color(.green)相似的點方法也叫作modifier（叫啥名不重要），調用後返回該視圖自己，所以相似鏈式編程，可不停日後面追加所謂的modifier。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)
            /// "步驟4: 設置顏色爲綠色"
            .color(.green)
    }
}

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

複製代碼

預覽： ⬇️

🙏代碼即視圖，視圖即代碼 🙏。即便使用屬性檢查器更改或刪除屬性時，Xcode也會當即更新代碼以匹配。看步驟5 ⬇️

步驟5

按住Command鍵並單擊"Turtle Rock"文本視圖，點擊Inspect...進入其屬性檢查器，單擊Color右側下拉菜單並選擇"Inherited"(繼承系統默認值的意思)，效果就是把文本顏色再回原來的黑色。

步驟6

此時，Xcode會自動刪除.color(.green)這行代碼以響應上面的更改。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)
            /// "步驟6: Xcode自動刪除原來設置顏色的代碼，以響應屬性檢查器的更改"
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽： ⬇️

3、使用Stacks佈局View

在上一節中，建立了地標名字的文本視圖，接着咱們繼續添加包含該地標詳細信息（如該地點著名的公園名稱和所在州）的文本視圖。
建立SwiftUI的視圖時，咱們能夠在視圖的body屬性中描述其內容、佈局和行爲，可是body內只返回單個視圖。咱們能夠將多個視圖組合放到Stack中。

Stack:能夠理解爲存放View的容器，扔進去的View們由Stack擺佈，擺佈的方式有View們橫着排、豎着排和從後往前排等
HStack:全稱Horizontal Stack，水平排列，也就是橫着排
VStack:全稱Vertical Stack，垂直排列，也就是豎着排

本節用Stack幹兩個事兒：
1.公園名稱和所在州名稱對應的倆文本視圖橫着排
2.地標名字的文本視圖擱1上面，如圖

屬性檢查器除了能夠在預覽畫布裏展開，代碼中一樣奏效：

步驟1

按住Commond鍵並單擊Text("Turtle Rock")代碼行，選擇Embed in VStack。

接下來，拖一個文本視圖添加到這個VStack中。

步驟2

單擊Xcode右上角的+按鈕，而後將Text視圖拖動到代碼中Turtle Rock整個文本視圖後面的位置。

步驟3

將拖進來的文本視圖的文本替換爲"Joshua Tree National Park"。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
            /// "步驟3: 拖進來，換個文本"
            Text("Joshua Tree National Park")
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽： ⬇️

自定義位置以匹配所需佈局。

步驟4

字體設置爲".subheadline"。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                /// "步驟4: 設置字體爲 subheadline"
                .font(.subheadline)
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽： ⬇️

步驟5

設置VStack對齊方式爲左對齊。

默認狀況下，VStack沿視圖的中軸線對齊。

/// ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) { // "步驟5: 設置對齊方式爲左對齊"
            Text("Turtle Rock")
                .font(.title)
            Text("Joshua Tree National Park")
                .font(.subheadline)
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽： ⬇️

接下來，在"Joshua Tree National Park"文本右側添加另外一個文本視圖。

步驟6

打開"Joshua Tree National Park"的屬性檢查器，而後選擇Embed in hstack。

步驟7

更改文本爲"California"，而後將字體設置爲"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)
                /// "步驟7: 和上一Text一同裝進HStack，並設置文本和字體"
                Text("California")
                    .font(.subheadline)
            }
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽： ⬇️

步驟8

讓視圖佈局在整個屏幕寬度上，插入Spacer()，以下。

默認狀況下，文本內容寬度決定文本視圖區域，使用Spacer()可撐開當前Stack內全部視圖，使View們充分利用該Stack的全部空間。

/// 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() // "步驟8: 添加佔位空間"
                Text("California")
                    .font(.subheadline)
            }
        }
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽： ⬇️

步驟9

最後，使用.padding()方法給整個VStack一點喘息的空間。

/// 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()  // "步驟9: 設置默認內邊距，使得VStack內部視圖起始點再也不死死地貼近邊緣"
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
複製代碼

預覽： ⬇️

4、建立自定義圖像

設置好地標名稱和詳情的各類文本視圖後，接下來來張圖意思一下。
再也不在上面文件中添加新代碼，咱們尋另外一處實現帶有遮罩、邊框和陰影效果的圖片 View。

步驟1

在項目的資源文件夾中找到"turtlerock.png"，將其拖到"Resources"目錄中的"AppIcon"位置。

接下來，爲自定義圖像視圖建立一個新的".swift"文件。

步驟2

選擇File > New > File打開模板選擇器，選擇User Interface分類下的SwiftUI View，而後單擊Next。將文件命名爲"CircleImage.swift"，而後單擊Create完成建立。

您能夠插入圖像並修改其顯示以匹配所需的設計。

步驟3

使用Image(_:)方法初始化圖像，替換掉默認的Text視圖。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        /// "步驟3"
        Image("turtlerock")
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽： ⬇️

步驟4

使用.clipShape(Circle())方法將圖片裁成圓形。

Circle()，做爲圓圈能夠用做遮罩，也能夠在圈內填充顏色來用做單獨的圓形視圖。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            /// "步驟4: 搞成圓的"
            .clipShape(Circle())
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽： ⬇️

步驟5

建立一個灰色的圓圈做爲邊框，而後將其蓋在上面的圓形圖片上。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            /// "步驟5: 蓋一個圓圈，灰色的，寬度爲4"
            .overlay(
                Circle().stroke(Color.gray, lineWidth: 4))
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽： ⬇️

步驟6

接下來，添加半徑爲10點的陰影。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.gray, lineWidth: 4))
            /// "步驟6: 設置陰影"
            .shadow(radius: 10)
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽： ⬇️

步驟7

將步驟5裏的邊框顏色切換爲白色，收工。

/// CircleImage.swift

import SwiftUI

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(
                Circle().stroke(Color.white, lineWidth: 4)) // "步驟7: 切換爲白色"
            .shadow(radius: 10)
    }
}

struct CircleImage_Preview: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}
複製代碼

預覽： ⬇️

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程