SwiftUI - 表格

SwiftUI 對錶格提供了良好的支援。表格檢視用於以表格形式顯示資料。它可以建立簡單和複雜的表格佈局。它允許我們以結構化和多列布局顯示資料。

我們還可以自定義表格及其資料，例如標題、表格內容的樣式、字型、背景顏色、每列的格式等。日曆、產品比較等是 UI 中表格的一些現實生活示例。因此，在本節中，我們將介紹如何建立表格、如何設定樣式、如何排序表格資料等等。

在 SwiftUI 中建立表格

在 SwiftUI 中，我們可以藉助表格檢視建立表格。表格檢視以行和列的格式顯示資料。它根據可識別的可識別資料集合計算其行。Identifiable 是一個類，其例項持有具有有效身份的實體的值。表格支援水平和垂直滾動，以便在行和列的數量超過檢視寬度時調整表格的檢視。

語法

以下是語法：

Table(IdentifiableData){
   TableColumn(Text, value: \.IdentifiableProperty1)
   TableColumn(Text, value: \.IdentifiableProperty1
}

示例

以下 SwiftUI 程式用於建立一個簡單的表格，其中儲存了學生姓名及其喜歡的科目。

import SwiftUI

struct Student: Identifiable{
   let name: String
   let id = UUID()
   let subject: String
}

struct ContentView: View {
   @State private var stud = [
   Student(name: "Mohina", subject: "Maths"),
   Student(name: "Rohita", subject: "Science"),
   Student(name: "Soman", subject: "Maths"),
   Student(name: "Soha", subject: "Science"),
   ]
   
   var body: some View {
     VStack{
       Text("Class = 1 Data ").font(.title2)
       
       // Creating table
       Table(stud){
         TableColumn("Student Names", value: \.name)
         TableColumn("Favourite Subject", value: \.subject)
       }
     }
     
   }
}
#Preview {
   ContentView()
}

輸出

在 SwiftUI 中向表格新增選擇功能

我們還可以透過建立 Set 型別的繫結選擇變數來選擇表格的一行或多行。要建立一個表格資料的單個可選擇例項，我們必須為此表格建立一個 id 型別，然後將該變數傳遞給表格檢視。

示例

以下 SwiftUI 程式用於建立一個可選擇的表格。

import SwiftUI

struct Student: Identifiable{
   let name: String
   let id = UUID()
   let age: Int
   let subject: String
}
struct ContentView: View {
   @State private var stud = [
     Student(name: "Mohina", age: 19, subject: "Maths"),
     Student(name: "Rohita", age: 18, subject: "Science"),
     Student(name: "Soman", age: 10, subject: "Maths"),
     Student(name: "Soha", age: 17, subject: "Science"),
   ]
   @State private var select = Set<Student.ID>()

   var body: some View {
     VStack{
       Text("Original Table ").font(.title2)
       
       // Creating table
       Table(stud, selection: $select){
         TableColumn("Student Names", value: \.name)
         TableColumn("Age"){
            stud in Text(String(stud.age))
         }
         TableColumn("Favourite Subject", value: \.subject)
       }
     }
     
   }
}
#Preview {
   ContentView()
}

輸出

在 SwiftUI 中設定表格樣式

在 SwiftUI 中，我們可以使用 `tableStyle()` 修飾符根據設計需要設定表格樣式。`.tableStyle()` 修飾符為我們提供了一些預定義的表格樣式，使用這些樣式可以增強簡單表格的外觀。

語法

以下是語法：

func tableStyle(_ style: S) -> some View where S : TableStyle

它只接受一個引數，即樣式。此引數的值可以是以下任何一個：

.automatic：用於將預設系統樣式應用於表格。
inset：用於將內嵌樣式應用於表格，這使得其內容從邊緣縮排。

示例

以下 SwiftUI 程式用於以內嵌格式設定表格樣式。

import SwiftUI
struct Student: Identifiable{
   let name: String
   let id = UUID()
   let age: Int
   let subject: String
}
struct ContentView: View {
   @State private var stud = [
     Student(name: "Mohina", age: 19, subject: "Maths"),
     Student(name: "Rohita", age: 18, subject: "Science"),
     Student(name: "Soman", age: 10, subject: "Maths"),
     Student(name: "Soha", age: 17, subject: "Science"),
   ]
   var body: some View {
     VStack{
       Text("Original Table ").font(.title2)
       
       // Creating table
       Table(stud){
         TableColumn("Student Names", value: \.name)
         TableColumn("Age"){
            stud in Text(String(stud.age))
         }
         TableColumn("Favorite Subject", value: \.subject)
       }.tableStyle(.inset)       
     }     
   }
}

#Preview {
   ContentView()
}

輸出

列印頁面