D1 - 用 SwiftUI 讓有趣的點子變成 Apps{SwiftUI 簡介}

14th鐵人賽 swiftui swift ios apple

Marvin

2022-09-02 18:45:27

838 瀏覽

分享至

挑戰賽文章列表

SwiftUI

在 2019 年的 WWDC 上，Apple 向大家介紹了一種新的做 iOS App 的方法 - SwiftUI

在以前，要用原生的方法寫一個 iOS App，Apple 提供的是 UIKit framework。在 2019 以後，iOS 的原生開發者，有機會使用不同於 UIKit 的 framework 來進行 app 開發，就是 SwiftUI。

SwiftUI 的風格長的像這樣

import SwiftUI

struct AlbumDetail: View {
	var album: Album

	var body: some View {
		List(album.songs) { song in 
			HStack {
				Image(album.cover)
				VStack(alignment: .leading) {
					Text(song.title)
					Text(song.artist.name)
						.foregroundStyle(.secondary)
				}
			}
		}
	}
}

SwiftUI 是用宣告式的方法，讓開發者告訴框架想要對畫面進行渲染的目標。Apple 也做出了大量的 tutorial 範例，讓開發者可以直接從範例中，知道如果進行相對複雜，或是在 UIKit 中是很常見的 UI 樣式。

Apple 範例

https://developer.apple.com/tutorials/swiftui

與 UIKit 進行整合

在 WWDC19 的時候，從 SwiftUI 的文件中可以看到，仍然有數個元件，仍然沒有實作在 SwiftUI。至今 (2022)，像是 WKWebView 還有 MapView 在 SwiftUI 中還是沒有實作。而 Framework 團隊也有做出能讓 UIKit ←→ SwiftUI 進行雙向溝通的方法。

如果要使用 UIKit 的元件，要讓 UIView conform UIViewRepresentable, 讓 UIViewController conform UIViewControllerRepresentable. 然後實作對應的 protocol func 即可。

如果要讓 SwiftUI 能在 UIKit 中元件中使用，可以使用 UIHostingController 這個元件，這個元件的建構子為 SwiftUI 的 View。

使用上面這兩個方法，就可以讓 UIKit 和 SwiftUI 的元件做溝通，這也是讓開發者去嘗試新 UI 製作方式的好方法。