SwiftUI - 檢視



在 SwiftUI 中,檢視是用於建立應用程式使用者介面的基本構建塊。單個應用程式可以包含多個檢視,每個檢視都包含對螢幕上將顯示內容的描述。我們在螢幕上看到的任何內容都源自檢視中給出的描述。

檢視是值型別,而不是指標型別。檢視很輕量級,並且始終存在於層次結構中。

在 SwiftUI 中建立檢視

要建立檢視,我們必須定義一個符合View協議的結構體。View 協議負責如何在應用程式的檢視上顯示什麼內容。View 協議使用body屬性來定義檢視的內容。我們可以使用內建檢視或自定義檢視來建立檢視。請按照以下步驟建立一個簡單的檢視:

步驟 1:匯入 SwiftUI

首先在專案中匯入 SwiftUI 來建立檢視。

import SwiftUI

步驟 2:定義符合 View 協議的結構體

現在定義一個符合 View 協議的結構體。它就像一個藍圖,描述了功能。符合該檢視的結構體必須滿足協議提供的功能。之後,您可以將自定義檢視新增到檢視層次結構中,使其成為應用程式的一部分。

struct ContentView: View {
}

步驟 3:實現 body 屬性

建立結構體後,我們必須實現 body 屬性。此 body 屬性是 View 協議的主要要求,它描述了檢視的佈局和內容。

在 SwiftUI 中,我們不需要顯式宣告 body 屬性,而是使用 some View 語法宣告 body 屬性,此語法表示 body 型別符合 View。body 的型別取決於 body 的內容,可以在開發過程中進行編輯,或者可以說 Swift 會自動推斷型別。

在這裡,我們可以使用內建檢視或自定義檢視來建立應用程式的使用者介面。此外,我們可以藉助 SwiftUI 提供的修飾符來配置檢視的外觀。這些修飾符只不過是與特定檢視關聯的方法。

import SwiftUI

struct ContentView: View {
   var body: some View {
      // Code..
   }
}

步驟 4:將檢視新增到檢視層次結構

在 SwiftUI 中,我們可以透過將其宣告到將在層次結構中顯示的位置來將檢視新增到其他檢視中。

import SwiftUI

struct ContentView: View {
   var body: some View {
      MyNewView(x:.title)
   }
}

步驟 5:預覽

我們可以藉助 #Preview 檢視檢視的預覽。

#Preview {
   ContentView()
}

以下 SwiftUI 程式用於建立一個簡單的檢視。

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack{
         Rectangle()
         .fill(Color.gray)
         .frame(width: 200, height: 100)
         .overlay((Text("TutorialsPoint").font(.title)))            
      }
   }
}
#Preview {
   ContentView()
}

輸出

Views

SwiftUI 中的內建檢視

SwiftUI 提供了廣泛的檢視,用於建立動態且響應迅速的使用者介面。這些檢視具有廣泛的功能和修飾符。一些常用的內建檢視如下:

檢視 描述
Text("Some Text") 用於顯示文字。
Image("image") 用於顯示影像。
Button(action:) 用於顯示一個可點選的按鈕,點選時執行操作。
Toggle(isOn:) 用於建立一個切換開關。
Slider(value:, in:) 用於建立一個滑塊,從給定範圍內選擇一個值。
TextField("name", text:) 允許使用者輸入和編輯資料。
List() 用於顯示一個可滾動的列表。
Form() 用於建立一個表單,從使用者那裡獲取輸入。
Spacer() 用於在檢視之間新增空間。
ScrollView 用於為其子檢視建立一個可滾動的容器。
廣告
© . All rights reserved.