柚子快報邀請碼778899分享：ios SwiftUI入門篇
柚子快報邀請碼778899分享：ios SwiftUI入門篇
1.?介紹
SwiftUI是由蘋果公司推出的現(xiàn)代化用戶界面（UI）框架，用于開發(fā)iOS、macOS、watchOS和tvOS應用程序。它于2019年首次發(fā)布，是蘋果在Swift編程語言之上的一層抽象，旨在簡化和改進應用程序的UI開發(fā)過程。相比UIKit具有多方面的優(yōu)勢和特點，這些特點使得它成為iOS和其他Apple平臺開發(fā)中的強大工具：
????????聲明式語法：
SwiftUI：開發(fā)者通過簡單的Swift代碼描述UI的結(jié)構(gòu)和外觀，采用聲明式語法。這種方式比傳統(tǒng)的UIKit的命令式編程風格更直觀和易于理解。
UIKit：開發(fā)者需要編寫大量的代碼來配置和管理UI元素的屬性和行為，這種方式容易導致代碼的復雜性和難以維護性。
????????實時預覽和交互性：
SwiftUI：結(jié)合Xcode的實時預覽功能，開發(fā)者可以即時查看和交互他們所寫的UI代碼，無需在模擬器或真機上運行應用程序。
UIKit：開發(fā)者需要不斷地在模擬器或真機上運行應用程序來查看UI效果，這增加了開發(fā)周期和調(diào)試的復雜性。
???????????????????????????????????????????跨平臺開發(fā)：
SwiftUI：支持iOS、macOS、watchOS和tvOS平臺的開發(fā)，可以共享大部分代碼和UI邏輯，減少了重復工作。UIKit：雖然UIKit也能夠跨平臺開發(fā)，但是每個平臺之間的UI代碼和布局通常需要顯著的適配和調(diào)整。
????????自動化布局：
SwiftUI：提供了一系列簡單且強大的布局視圖（如VStack、HStack、ZStack等），幫助開發(fā)者輕松地實現(xiàn)復雜的UI布局。
UIKit：雖然Auto Layout提供了強大的布局管理系統(tǒng)，但是配置和管理約束條件需要編寫大量的代碼，對于復雜布局來說較為繁瑣。
????????狀態(tài)管理和數(shù)據(jù)綁定：
SwiftUI：引入了屬性綁定（@State、@Binding）和狀態(tài)對象（@StateObject、@ObservedObject），使得數(shù)據(jù)與UI視圖之間的綁定更加簡單和直觀。
UIKit：開發(fā)者需要手動管理數(shù)據(jù)和UI視圖之間的同步，通常需要使用委托、通知或KVO等模式。
????????現(xiàn)代化設計支持：
SwiftUI：內(nèi)置支持現(xiàn)代化設計語言，如暗黑模式、動態(tài)字體調(diào)整等，能夠自動響應系統(tǒng)級別的外觀變化。
UIKit：雖然也能夠支持現(xiàn)代化設計語言，但是需要開發(fā)者顯式地處理外觀變化和主題切換。
綜上所述，SwiftUI通過其聲明式語法、實時預覽、跨平臺開發(fā)支持以及更簡單的布局和狀態(tài)管理等特點，顯著提升了iOS開發(fā)的效率和開發(fā)體驗，使得開發(fā)者能夠更快速地構(gòu)建出現(xiàn)代化和響應式的應用程序。
2.?環(huán)境搭建
????????2.1?Xcode安裝和配置
從Mac AppStore或者蘋果開發(fā)者網(wǎng)站?Sign In - Apple?下載并安裝Xcode，可以依據(jù)需要，安裝iPhone/iPad/Apple VisionPro模擬器，支持模擬器/真機調(diào)試。
2.2?創(chuàng)建第一個SwiftUI項目
打開Xcode，創(chuàng)建新項目，配置項目信息：
名稱（e.g:“MyFirstSwiftUIApp”）
組織標識符（e.g:“com.yourcompany”）
選擇開發(fā)團隊
選擇開發(fā)語言（Swift或Objective-C）和界面（Storyboard或SwiftUI）
即可創(chuàng)建并預覽項目，運行第一個SwiftUI項目。
3.?SwiftUI基礎(chǔ)
3.1?SwiftUI的視圖結(jié)構(gòu)和聲明式語法
3.1.1?視圖結(jié)構(gòu)
SwiftUI的視圖結(jié)構(gòu)是基于一種嵌套和組合的方式來構(gòu)建UI界面的，核心的視圖類型包括：
????????View：所有的UI組件都是視圖（View）。視圖可以是簡單的文本、圖像，也可以是更復雜的組合視圖。
????????Container Views：這些視圖用于組合其他視圖，常見的容器視圖包括：
VStack：垂直堆棧，將子視圖垂直排列。
HStack：水平堆棧，將子視圖水平排列。
ZStack：層疊視圖，將子視圖層疊在一起。
List：列表視圖，顯示動態(tài)內(nèi)容列表。
????????Control Views：用于用戶交互的視圖，如按鈕（Button）、滑塊（Slider）、文本輸入框（TextField）等。
????????Modifier：修飾符可以應用于視圖，以更改其外觀或行為。例如，.foregroundColor(.blue)可以設置文本顏色為藍色。
3.1.2?聲明式語法
SwiftUI使用聲明式語法來描述UI的外觀和行為，與傳統(tǒng)的命令式編程風格有顯著不同。聲明式語法的關(guān)鍵點包括：
????????簡單和直觀：您只需描述UI應該顯示什么樣子，而不是告訴計算機如何繪制它。
????????無需手動更新：當視圖的狀態(tài)（state）發(fā)生變化時，SwiftUI會自動更新視圖的顯示，而不需要手動管理UI的刷新。
????????數(shù)據(jù)驅(qū)動：視圖通常會綁定到某些數(shù)據(jù)，當數(shù)據(jù)變化時，視圖會相應地更新。這通過屬性綁定（@State、@Binding）、狀態(tài)對象（@StateObject、@ObservedObject）來實現(xiàn)。
????????組合性：可以將小的視圖組合成更大的視圖，形成復雜的UI結(jié)構(gòu)。這種組合性使得UI的構(gòu)建更加靈活和模塊化。
????????預覽功能：Xcode的實時預覽功能允許開發(fā)者在編寫代碼時即時看到UI的外觀，這大大提高了開發(fā)效率。
3.1.3?示例代碼
下面是一個簡單的SwiftUI代碼示例，展示了視圖結(jié)構(gòu)和聲明式語法的應用：
import SwiftUI
struct ContentView: View {
????@State private var isButtonVisible = true??// 屬性包裝器用于管理視圖狀態(tài)
????
????var body: some View {
????????VStack { // 垂直堆棧視圖 (VStack)
????????????Text("Hello, SwiftUI!") // 簡單文本視圖
????????????
????????????if isButtonVisible {
????????????????Button("Toggle Button") {
????????????????????self.isButtonVisible.toggle()
????????????????}
????????????}
????????}
????????.padding() // 修飾符，添加內(nèi)邊距
????}
}
// 實時預覽
struct ContentView_Previews: PreviewProvider {
????static var previews: some View {
????????ContentView()
????}
}
3.2?布局和視圖組合
在SwiftUI中，布局和視圖組合是構(gòu)建用戶界面的關(guān)鍵部分。SwiftUI提供了一系列容器視圖和布局視圖，使得開發(fā)者能夠以簡單和直觀的方式創(chuàng)建復雜的布局和組合視圖。
3.2.1?布局視圖
SwiftUI中的布局視圖是用來排列和組織其他視圖的容器，常用的布局視圖包括：
VStack：垂直堆棧視圖，將子視圖垂直排列。
VStack {
????Text("Item 1")
????Text("Item 2")
????Text("Item 3")
}
HStack：水平堆棧視圖，將子視圖水平排列。
HStack {
????Text("Left")
????Spacer()
????Text("Right")
}
ZStack：層疊視圖，將子視圖層疊在一起。
ZStack {
????Circle()
????????.foregroundColor(.blue)
????????.frame(width: 100, height: 100)
????
????Text("Centered Text")
????????.foregroundColor(.white)
}
List：列表視圖，用于顯示動態(tài)內(nèi)容列表。
List {
????Text("Item 1")
????Text("Item 2")
????Text("Item 3")
}
Form：表單視圖，用于顯示表單和輸入控件。
Form {
????TextField("Username", text: $username)
????SecureField("Password", text: $password)
????Button("Login") {
????????// Login action
????}
}
3.2.2?視圖組合
視圖組合是指將多個視圖組合在一起形成復雜的UI結(jié)構(gòu)，可以通過嵌套不同的布局視圖和控件視圖來實現(xiàn)。例如：???????
VStack {
????Text("Welcome to SwiftUI!")
????????.font(.largeTitle)
????
????HStack {
????????Image(systemName: "star.fill")
????????????.foregroundColor(.yellow)
????????Text("SwiftUI Basics")
????????????.font(.title)
????}
????
????Spacer()
????
????Button("Get Started") {
????????// Action to start the app
????}
????.padding()
}
.padding()
在這個例子中：
使用?VStack?將視圖垂直堆疊。
在?VStack?中使用?HStack?將圖標和標題水平排列。
使用?Spacer()?在垂直堆棧中創(chuàng)建一個可伸縮的空間。
在底部添加一個帶有動作的按鈕，并對其進行內(nèi)邊距修飾。
4.?基本組件
4.1?文本（Text）
Text?是用來顯示文本內(nèi)容的視圖組件。它允許您在應用程序中輕松地顯示靜態(tài)和動態(tài)文本，同時支持對文本進行樣式和布局設置。讓我們來詳細了解?Text?的用法和一些常見的樣式設置。
4.1.1?基本用法
使用?Text?最簡單的方式是傳入一個字符串作為其內(nèi)容：
struct ContentView: View {
????var body: some View {
????????Text("Hello, SwiftUI!")
????}
}
4.1.2?樣式設置
通過在?Text?上使用修飾符來設置文本的樣式，比如字體、顏色、對齊方式等。
字體和顏色
Text("Welcome")
????.font(.title)
????.foregroundColor(.blue)
對齊方式
Text("Centered Text")
????.multilineTextAlignment(.center)
加粗和斜體
Text("Bold and Italic")
????.bold()
????.italic()
4.1.3?動態(tài)文本
在?Text?中使用字符串插值或者變量來顯示動態(tài)文本內(nèi)容。例如：
struct ContentView: View {
????let username = "John Doe"
????
????var body: some View {
????????Text("Welcome, \(username)!")
????????????.font(.headline)
????????????.foregroundColor(.green)
????}
}
4.1.4?多行文本
如果文本內(nèi)容較長或者需要顯示多行文本，您可以使用?Text?的?lineLimit(nil)?和?multilineTextAlignment()?來設置文本的行數(shù)限制和對齊方式。
Text("This is a long text that may span multiple lines depending on the available space.")
????.lineLimit(nil)
????.multilineTextAlignment(.leading)
4.2?圖像（Image）
Image?是用來顯示圖像內(nèi)容的視圖組件。它允許您在應用程序中加載和顯示圖像，并支持對圖像進行大小調(diào)整、裁剪和其他樣式設置。讓我們來詳細了解?Image?的用法和一些常見的樣式設置。
4.2.1?基本用法
使用?Image?最簡單的方式是指定圖像的名稱，SwiftUI會自動查找和加載相應的圖像資源。通常，您需要將圖像資源添加到項目的?Assets.xcassets?中。
struct ContentView: View {
????var body: some View {
????????Image("yourImageName")
????}
}
4.2.2?圖像樣式和調(diào)整
圖像調(diào)整
可以使用修飾符來調(diào)整圖像的大小、比例和裁剪。
Image("yourImageName")
????.resizable() // 可調(diào)整大小
????.scaledToFit() // 按原始寬高比縮放適合父視圖
????.frame(width: 200, height: 200) // 設置框架大小
圖像修飾
可以對圖像進行進一步的修飾，例如添加圓角、邊框或者使用遮罩。
Image("yourImageName")
????.resizable()
????.clipShape(Circle()) // 添加圓形遮罩
????.overlay(Circle().stroke(Color.blue, lineWidth: 4)) // 添加藍色邊框
????.shadow(radius: 10) // 添加陰影效果
4.2.3?加載網(wǎng)絡圖像
要加載來自URL的圖像，可以使用?URLImage?庫或者自定義?View。以下是一個簡單的示例，演示如何加載網(wǎng)絡圖像：
struct RemoteImage: View {
????var imageUrl: String
????
????var body: some View {
????????if let url = URL(string: imageUrl), let imageData = try? Data(contentsOf: url) {
????????????Image(uiImage: UIImage(data: imageData)!)
????????????????.resizable()
????????????????.scaledToFit()
????????????????.frame(width: 200, height: 200)
????????} else {
????????????Text("Image not found")
????????}
????}
}
struct ContentView: View {
????var body: some View {
????????RemoteImage(imageUrl: "https://example.com/yourImage.jpg")
????}
}
4.3?按鈕（Button）
Button?是用來創(chuàng)建用戶可以點擊的交互性控件。它允許您在應用程序中添加按鈕，以觸發(fā)各種操作和響應用戶的輸入。讓我們來詳細了解?Button?的用法和一些常見的設置。
4.3.1?基本用法
使用?Button?最簡單的方式是在其構(gòu)造函數(shù)中傳入一個視圖（通常是?Text?或者?Image），作為按鈕的標簽。
struct ContentView: View {
????var body: some View {
????????Button(action: {
????????????// 點擊按鈕后的操作
????????????print("Button tapped!")
????????}) {
????????????Text("Tap me!")
????????????????.font(.title)
????????????????.foregroundColor(.white)
????????????????.padding()
????????????????.background(Color.blue)
????????????????.cornerRadius(10)
????????}
????}
}
4.3.2?按鈕樣式和修飾
自定義按鈕樣式
可以通過添加不同的修飾符來自定義按鈕的外觀和行為。
Button(action: {
????// 點擊按鈕后的操作
}) {
????HStack {
????????Image(systemName: "person.fill")
????????Text("Login")
????????????.fontWeight(.semibold)
????}
????.padding()
????.foregroundColor(.white)
????.background(Color.green)
????.cornerRadius(8)
????.shadow(radius: 5)
}
動態(tài)按鈕
可以根據(jù)視圖狀態(tài)來動態(tài)更改按鈕的標簽或樣式。
struct ContentView: View {
????@State private var isLogged = false
????
????var body: some View {
????????Button(action: {
????????????self.isLogged.toggle()
????????}) {
????????????Text(isLogged ? "Logout" : "Login")
????????????????.fontWeight(.semibold)
????????????????.padding()
????????????????.foregroundColor(.white)
????????????????.background(isLogged ? Color.red : Color.blue)
????????????????.cornerRadius(8)
????????}
????}
}
4.3.3?按鈕響應和動作
每個按鈕都需要一個操作（action），當用戶點擊按鈕時，這個操作會被觸發(fā)。操作通常是一個閉包，用于定義按鈕點擊后的行為。
Button(action: {
????print("Button tapped!")
}) {
????Text("Tap me!")
}
???????5.?列表和導航
5.1?列表視圖（List）
List?是一個用于顯示可滾動的內(nèi)容列表的視圖組件。List?適用于展示動態(tài)和靜態(tài)數(shù)據(jù)，它支持多種自定義選項和交互功能。下面是對?List?視圖的詳細介紹，包括基本用法、動態(tài)數(shù)據(jù)展示和自定義樣式。
5.1.1?基本用法
要創(chuàng)建一個簡單的列表視圖，您只需將視圖內(nèi)容傳遞給?List?？梢杂渺o態(tài)內(nèi)容或動態(tài)數(shù)據(jù)來填充列表項。
靜態(tài)內(nèi)容
struct ContentView: View {
????var body: some View {
????????List { // 顯示了三個列表項
????????????Text("Item 1")
????????????Text("Item 2")
????????????Text("Item 3")
????????}
????}
}
???????
5.1.2?動態(tài)數(shù)據(jù)
通常情況下，List?用于展示動態(tài)數(shù)據(jù)，您可以將數(shù)據(jù)綁定到?List?中，從而實現(xiàn)數(shù)據(jù)驅(qū)動的UI更新。
基本動態(tài)數(shù)據(jù)
struct ContentView: View {
????let items = ["Item 1", "Item 2", "Item 3", "Item 4"]
????
????var body: some View {
????????List(items, id: \.self) { item in
????????????Text(item)
????????}
????}
}
使用自定義數(shù)據(jù)模型
struct Item: Identifiable {
????var id = UUID()
????var name: String
????var detail: String
}
struct ContentView: View {
????let items = [
????????Item(name: "Item 1", detail: "Detail 1"),
????????Item(name: "Item 2", detail: "Detail 2"),
????????Item(name: "Item 3", detail: "Detail 3")
????]
????
????var body: some View {
????????List(items) { item in
????????????VStack(alignment: .leading) {
????????????????Text(item.name)
????????????????????.font(.headline)
????????????????Text(item.detail)
????????????????????.font(.subheadline)
????????????}
????????????.padding()
????????}
????}
}
如果您的數(shù)據(jù)模型更加復雜，可以創(chuàng)建一個自定義的結(jié)構(gòu)體并使用它。
???????
5.1.3?自定義列表項
可以自定義每個列表項的視圖，添加更多的視圖元素和樣式。
struct Item: Identifiable {
????var id = UUID()
????var name: String
????var detail: String
}
struct ContentView: View {
????let items = [
????????Item(name: "Item 1", detail: "Detail 1"),
????????Item(name: "Item 2", detail: "Detail 2"),
????????Item(name: "Item 3", detail: "Detail 3")
????]
????
????var body: some View {
????????List(items) { item in
????????????VStack(alignment: .leading) {
????????????????Text(item.name)
????????????????????.font(.headline)
????????????????Text(item.detail)
????????????????????.font(.subheadline)
????????????}
????????????.padding()
????????}
????}
}
5.1.4?列表的交互
List?支持多種交互功能，如行的刪除、移動等。
刪除列表項
struct ContentView: View {
????@State private var items = ["Item 1", "Item 2", "Item 3"]
????
????var body: some View {
????????List {
????????????ForEach(items, id: \.self) { item in
????????????????Text(item)
????????????}
????????????.onDelete(perform: delete) // 修飾符允許用戶從列表中刪除項目
????????}
????}
????
????func delete(at offsets: IndexSet) {
????????items.remove(atOffsets: offsets)
????}
}
移動列表項
struct ContentView: View {
????@State private var items = ["Item 1", "Item 2", "Item 3"]
????
????var body: some View {
????????List {
????????????ForEach(items, id: \.self) { item in
????????????????Text(item)
????????????}
????????????.onMove(perform: move) // 修飾符允許用戶移動列表中的項目
????????}
????????.navigationBarItems(trailing: EditButton()) // 進入編輯模式的按鈕
????}
????
????func move(from source: IndexSet, to destination: Int) {
????????items.move(fromOffsets: source, toOffset: destination)
????}
}
5.2?導航視圖（NavigationView）
NavigationView?是用于在應用程序中創(chuàng)建導航層次結(jié)構(gòu)的視圖容器。它允許用戶通過導航鏈接（NavigationLink）在不同的視圖之間切換，并提供了導航欄的功能，如標題、按鈕和其他交互元素。下面是對?NavigationView?的詳細介紹，包括基本用法、導航鏈接、以及自定義導航欄。
5.2.1?基本用法
NavigationView?包裹在其他視圖的外層，提供導航和管理導航層次結(jié)構(gòu)的功能。
struct ContentView: View {
????var body: some View {
????????NavigationView {
????????????Text("Welcome to SwiftUI")
????????????????.navigationTitle("Home")
????????}
????}
}
5.2.2?導航鏈接
NavigationLink?用于在視圖之間創(chuàng)建導航鏈接。當用戶點擊鏈接時，會推送目標視圖到導航堆棧中。
基本導航鏈接
struct ContentView: View {
????var body: some View {
????????NavigationView {
????????????VStack {
????????????????NavigationLink(destination: DetailView()) { //創(chuàng)建了一個可以點擊的區(qū)域，點擊時會導航到 DetailView
????????????????????Text("Go to Detail View")
????????????????}
????????????????.padding()
????????????}
????????????.navigationTitle("Home")
????????}
????}
}
struct DetailView: View { //顯示了一個簡單的文本，并設置了導航欄標題為 "Detail"
????var body: some View {
????????Text("This is the detail view")
????????????.navigationTitle("Detail")
????}
}
導航鏈接與數(shù)據(jù)
還可以通過導航鏈接傳遞數(shù)據(jù)到目標視圖。
???????
struct ContentView: View {
????let items = ["Item 1", "Item 2", "Item 3"]
????
????var body: some View {
????????NavigationView {
????????????List(items, id: \.self) { item in
????????????????NavigationLink(destination: DetailView(item: item)) {
????????????????????Text(item)
????????????????}
????????????}
????????????.navigationTitle("Items")
????????}
????}
}
struct DetailView: View {// 接受一個 item 參數(shù)，通過 NavigationLink 將選中的項傳遞到目標視圖。
????let item: String
????
????var body: some View {
????????Text("Detail for \(item)")
????????????.navigationTitle(item)
????}
}
5.2.3?自定義導航欄
NavigationView?提供了一些方法來定制導航欄的外觀和行為，例如添加按鈕或修改標題。
添加導航欄按鈕
struct ContentView: View {
????var body: some View {
????????NavigationView {
????????????VStack {
????????????????Text("Welcome to SwiftUI")
????????????}
????????????.navigationTitle("Home")
????????????.navigationBarItems(trailing: Button(action: {
????????????????// 右側(cè)按鈕的動作
????????????????print("Edit tapped")
????????????}) {
????????????????Image(systemName: "pencil")
????????????})
????????}
????}
}
使用自定義視圖作為導航欄標題
可以使用自定義視圖作為導航欄標題，以實現(xiàn)更多樣的設計。
struct ContentView: View {
????var body: some View {
????????NavigationView {
????????????VStack {
????????????????Text("Welcome to SwiftUI")
????????????}
????????????.navigationTitle("Home")
????????????.navigationBarTitleDisplayMode(.inline)
????????????.navigationBarItems(leading: HStack {
????????????????Image(systemName: "star.fill")
????????????????Text("Favorites")
????????????})
????????}
????}
}
5.2.4?導航欄樣式
可以調(diào)整導航欄的樣式，例如背景顏色、透明度等。
???????
struct ContentView: View {
????init() {
????????UINavigationBar.appearance().backgroundColor = UIColor.systemTeal
????????UINavigationBar.appearance().largeTitleTextAttributes = [.foregroundColor: UIColor.white]
????}
????
????var body: some View {
????????NavigationView {
????????????VStack {
????????????????Text("Welcome to SwiftUI")
????????????}
????????????.navigationTitle("Home")
????????????.navigationBarTitleDisplayMode(.large)
????????}
????}
}
柚子快報邀請碼778899分享：ios SwiftUI入門篇
相關(guān)閱讀
本文內(nèi)容根據(jù)網(wǎng)絡資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Fyndiq發(fā)現(xiàn)出海坊
