SwiftUI:Button視圖和更新應用程序狀態

Button視圖可用於顯示互動式按鈕元素。 我們可以這樣聲明它: Button("按鈕標籤") { // 當點擊時執行的操作 } 或者這樣聲明: Button { // 當點擊時執行的操作 } label: { Text("按鈕標籤") } 第二種方式在按鈕的標籤中有其他內容,而不僅僅是文本時比較常用,例如圖像。 讓我們在一個SwtiUI程序中使用第一種方式: struct ContentView: View { var body: some View { Button("測試") { } .font(.title) } } 看到了吧?應用程序中有一個藍色文本,你可以點擊它。它是互動式的。 由於我們沒有告訴它在點擊時做什麼,所以它沒有任何操作。 我們可以在調試控制台中打印一些內容: struct ContentView: View { var body: some View { Button("測試") { print("測試") } .font(.title) } } 請注意,這僅在運行應用程序時才起作用,Xcode的預覽中不起作用。 現在我們可以為我們的應用程序添加另一個步驟。我們將在按鈕標籤中打印一個屬性值: struct ContentView: View { var count = 0 var body: some View { Button("計數:\(count)") { } ....

SwiftUI:ForEach 視圖

在 SwiftUI 中,ForEach 視圖非常有用,可以遍歷數組或範圍,並生成我們可以使用的視圖。 例如,我們在此創建了3個 Text 視圖,顯示從0到2的數字: ForEach(0..<3) { Text("\($0)") } $0 表示傳遞給閉包的第一個參數,在這個例子中分別是數字 0、1 和 2。 在這個例子中,為了避免重疊,我將它們嵌入到了一個 VStack 中: VStack { ForEach(0..<3) { Text("\($0)") }.padding() } 注意我使用了 padding() 修改器來添加一些間距。 在 List 視圖中,通常使用 ForEach: List { ForEach(0..<3) { Text("\($0)") } } 這是一種常見的用法,以至於我們實際上可以省略 ForEach,直接從 List 中遍歷: List(0..<3) { Text("\($0)") } 這兩個示例使用了範圍 0..<3。我們也可以遍歷數組: let fruits = ["Apple", "Pear", "Orange"] // ... List { ForEach(fruits, id: \.self) { Text("\($0)") } } 請注意,這種情況下我們有另外一個參數:id。 這是為了唯一識別數組中的項目。 對於內置類型,使用 \....

SwiftUI:NavigationView視圖

NavigationView視圖是非常重要的視圖,您會一直使用它。 NavigationView { } 一旦將視圖包裝到NavigationView中,您可以使用navigationTitle()修改器為視圖添加標題: NavigationView { Text("Hello") .navigationTitle("Welcome") } 然而,最重要的好處是現在我們可以使視圖成為導航到其他視圖的鏈接。 首先,我們創建另一個視圖。您可以將它添加到相同的文件中,也可以添加到項目中的另一個文件中: struct ThanksView: View { var body: some View { Text("Thanks for checking out the app!") } } 然後,將“Hello” Text視圖包裝到NavigationLink視圖中,其中我們將目的地參數設置為ThanksView: NavigationView { NavigationLink(destination: ThanksView()) { Text("Hello") .navigationTitle("Welcome") } } 現在,許多事情正在自動進行:Hello文本變為藍色並可點擊: 一旦我們點擊它,我們將顯示ThanksView和返回原始視圖的鏈接。左上角按鈕中顯示的文本來自我們設置的navigationTitle修改器: 以下是示例中使用的完整代碼: import SwiftUI struct ThanksView: View { var body: some View { Text("Thanks for checking out the app!") } } struct ContentView: View { var body: some View { NavigationView { NavigationLink(destination: ThanksView()) { Text("Hello") ....

SwiftUI:列表視圖

**列表(List)**視圖是在SwiftUI中最常用的視圖之一。 List { } 在其內部,您可以放置一系列的視圖,例如Text: 看到了嗎?List識別出Text子視圖,並將其放在一行中。 您可以放置多個子視圖,每個List的子視圖將被放在自己的行中: 在列表中,您可以使用**Section(選項卡)**視圖將項目分組,就像這樣: List的listStyle()修飾符可以讓您自定義列表的外觀,包括: InsetGroupedListStyle InsetListStyle SidebarListStyle GroupedListStyle PlainListStyle 例如,這是InsetGroupedListStyle: List { //... }.listStyle(InsetGroupedListStyle()) 這是GroupedListStyle: List { //... }.listStyle(GroupedListStyle()) 這是SidebarListStyle:

SwiftUI:堆疊和群組

沒有一個 SwiftUI 的應用程式除了 Hello World 之外只有一個視圖。 當你想要添加多個視圖時,你需要將它們添加到一個堆疊中。 有三種類型的堆疊: HStack 在 X 軸上對齊項目 VStack 在 Y 軸上對齊項目 ZStack 在 Z 軸上對齊項目 讓我們回到 Hello World 應用程式的程式碼: import SwiftUI struct ContentView: View { var body: some View { Text("Hello World") } } 要添加第二個 Text 視圖,我們不能這樣做: struct ContentView: View { var body: some View { Text("Hello World") Text("Hello again!") } } 而必須將這些視圖嵌入到堆疊中。 讓我們嘗試使用 VStack: struct ContentView: View { var body: some View { VStack { Text("Hello World") Text("Hello again!...

SwiftUI:屬性

您可以將任何屬性添加到任何 SwiftUI 視圖中,就像這樣: import SwiftUI struct ContentView: View { let name = "Flavio" var body: some View { Text("Hello, \(name)!") .font(.largeTitle) } } 您可以看到我使用了 let,因為該屬性是一個常量。 請注意,稍後我們將看到如何通過點擊按鈕來更新屬性值。 以下是另一個帶有整數變量的示例: import SwiftUI struct ContentView: View { let name = "Flavio" let age = 38 var body: some View { VStack { Text("Hello, \(name)!") .font(.largeTitle) Text("You are \(age) years old") } } }

SwiftUI:條件性顯示視圖中的項目

在表單中,一個常見的操作是使用一個切換控制項,當切換被啟用時,顯示一些額外的選項。 你可以在設定應用中經常看到這種情況,例如啟用 Wi-Fi 時。 那麼,你該如何實現這個效果呢? 首先,創建一個帶有切換控制項的 Form 視圖: struct ContentView: View { @State private var enabled = false var body: some View { Form { Toggle("啟用?", isOn: $enabled) } } } 然後,將下面這段代碼添加到 Toggle 視圖後面: if enabled { Section { Text("只有在啟用時才顯示這段文字") } } 像這樣: struct ContentView: View { @State private var enabled = false var body: some View { Form { Toggle("啟用?", isOn: $enabled) if enabled { Section { Text("只有在啟用時才顯示這段文字") } } } } } 現在,當切換被禁用時,Text 視圖將不可見:...

SwiftUI:標籤視圖

標籤視圖在像是TabView這樣的視圖中使用,用於顯示圖示和文字。 您可以通過將文字標籤作為第一個參數傳遞,然後將另一個字符串傳遞給systemImage參數,該參數識別圖示。 像這樣: Label("Calendar", systemImage: "calendar") 這將是結果: 傳遞給systemImage參數的參數是SF Symbols圖示之一。

SwiftUI:警告訊息

在給用戶提供反饋的同時,有時也可以用來協助調試應用程序,最常見的方式之一就是使用警告訊息。 SwiftUI 提供了 .alert() 修飾符,我們可以根據某些條件來顯示警告。 讓我們從以下範例開始,其中有一個帶有計數器的 Button: import SwiftUI struct ContentView: View { @State var count = 0 var body: some View { Button("Count: \(count)") { self.count += 1 } .font(.title) } } 當 count 達到 10 時,我希望顯示一個警告訊息。 我們該如何做到這一點? 我可以在 ContentView 中添加一個名為 showAlert 的布爾屬性,並編輯 Button 的點按操作內容: struct ContentView: View { @State var count = 0 @State var showAlert = false var body: some View { Button("Count: \(count)") { self.count += 1 if self....

為什麼選擇 iOS

為什麼我選擇深入研究 iOS 呢? 難道我放棄了 Web 開發嗎?當然不是。 Swift 為我帶來了一個全新且令人興奮的世界。 我不是一個 Web 開發人員,我是一個開發人員。無論最終形式是什麼,我的目標是幫助人們成為開發人員。 我有很多想要建立的應用程序的點子,我可以創建它們並解釋如何實現。 我認為很多人都想要建立一個 iOS 應用程序,但這並不是一件簡單的事情。 iOS 應用程序在很多方面都與 Web 應用程序非常不同。 首先,是分發方式。在 Web 上,你擁有自己的域名,你的應用程序就在那裡。而且你可以做任何合法的事情。在 iOS 上,只有 Apple App Store,而且 Apple 對其有很大的控制權。他們可以決定拒絕你的應用程序。 然後是技術堆棧。在 Web 上,你有 JavaScript、HTML 和 CSS,除非你使用一些小眾工具。而在 iOS 上,你有 Swift 和 SwiftUI。 再者,Web 是一個開放的平台,而 iOS 則是封閉的,完全受 Apple 控制。 還有一個很大的區別:你可以創造的類型。在 Web 上,你創建 Web 應用程序,它們存在於瀏覽器中。在 iOS 上,你創建的是移動應用程序,這些應用程序可以隨時隨地帶在身上。這些應用程序可以通過傳感器更好地融入你的生活,它們可以存在於你的手錶上(我說 iOS 但我的意思是所有的移動 Apple 平台:iPhone、iPad、手錶,不包括不同的 Mac)。 所以,對我而言,開始創建 iOS 應用程序更像是創建 Web 上無法實現的應用程序的一種方式,也是進入這個有趣的開發領域的途徑。