/

SwiftUI：ForEach 視圖

SwiftUI：ForEach 視圖

在 SwiftUI 中，ForEach 視圖非常有用，可以遍歷數組或範圍，並生成我們可以使用的視圖。

例如，我們在此創建了3個 Text 視圖，顯示從0到2的數字：

1
2
3
ForEach(0..<3) {
    Text("\($0)")
}

$0 表示傳遞給閉包的第一個參數，在這個例子中分別是數字 0、1 和 2。

在這個例子中，為了避免重疊，我將它們嵌入到了一個 VStack 中：

1
2
3
4
5
VStack {
    ForEach(0..<3) {
        Text("\($0)")
    }.padding()
}

注意我使用了 padding() 修改器來添加一些間距。

在 List 視圖中，通常使用 ForEach：

1
2
3
4
5
List {
    ForEach(0..<3) {
        Text("\($0)")
    }
}

這是一種常見的用法，以至於我們實際上可以省略 ForEach，直接從 List 中遍歷：

1
2
3
List(0..<3) {
    Text("\($0)")
}

這兩個示例使用了範圍 0..<3。我們也可以遍歷數組：

1
2
3
4
5
6
7
8
9
let fruits = ["Apple", "Pear", "Orange"]

// ...

List {
    ForEach(fruits, id: \.self) {
        Text("\($0)")
    }
}

請注意，這種情況下我們有另外一個參數：id。

這是為了唯一識別數組中的項目。

對於內置類型，使用 \.self 作為 id 是有效的；如果遍歷自定義結構體，則需要該結構體遵循 Identifiable 協議或提供唯一的參數。

tags: [“SwiftUI”, “ForEach”, “List”, “arrays”, “views”]