iOS 15 的 SwiftUI ：在 List 視圖中添加滑動動作及隱藏分隔線

在 WWDC 21，Apple 為 SwiftUI 框架的 List 視圖引入了一些改進。在 iOS 15 之前，我們沒有辦法直接在 List 視圖隱藏分隔線 (Line Separator)，我們還寫了一篇教學文章教大家利用 UIKit API 來解決這個問題。但是今年，SwiftUI 提供了一個名為 .listRowSeparator 的專用修飾符 (modifier)，讓開發者控制分隔線是否可見。此外，我們還可以改變分隔線的顏色。

UIKit 框架有內置的 API，讓我們在表格視圖 (table view) 中創建滑動操作 (swipe action)。在 iOS 14 中，如果要添加客製化滑動操作，我們就需要提供自己的實作。在即將發布的 iOS 15 中，SwiftUI 就引入了一個名為 .swipeActions 的新修飾符，用於在前端或後緣位置添加滑動操作。

在這篇教學文章中，我們來以範例程式碼看看這些新的修飾符。

讓我們開始吧！

在 List 視圖中隱藏分隔線

要在 List 視圖中隱藏行分隔線，我們只需要添加 .listRowSeparator 修飾符，並將值設置為 .hidden。看看以下範例：

List {
    ForEach(1..<8) { index in
    Image("photo-\(index)")
        .resizable()
        .scaledToFill()
        .frame(height: 200)
        .cornerRadius(10)
    }

    .listRowSeparator(.hidden)
}
.listStyle(PlainListStyle())

如果我們想再次顯示分隔線，就可以將修飾符的值設置為 .visible。你可以參考以下範例：

.listRowSeparator(showLineSeparator ? .visible : .hidden)

如果我們想更細緻地控制分隔線，可以使用另一個版本的 .listRowSeparator，並指定 edges 參數 (parameter)。比如說，如果你想在 List 視圖頂部保留分隔線，就可以這樣編寫程式碼：

.listRowSeparator(.hidden, edges: .bottom)

然後，你就會在預覽版面中看到以下的結果：

在 List 視圖中改變分隔線的顏色

在 iOS 15 中，我們不但可以隱藏分隔線，還可以在 List 視圖中嵌入 .listRowSeparatorTint 修飾符，來輕鬆更改分隔線的顏色。

List {
    ForEach(1..<8) { index in

        HStack {
            Image("photo-\(index)")
                .resizable()
                .scaledToFill()
                .frame(width: 100, height: 50)
                .cornerRadius(10)

            Text("Photo #\(index)")
                .bold()
        }
    }

    .listRowSeparatorTint(.blue)
}

在 List Row 創建客製化滑動操作

在 iOS 15，SwiftUI 引入了一個名為 .swipeActions 的新修飾符，讓開發者在任何 List Row 創建客製化滑動操作。我們只需要將 .swipeActions 修飾符附加到 List Row 的視圖中即可。看看以下範例：

List {
    ForEach(1..<8) { index in

        HStack {
            Image("photo-\(index)")
                .resizable()
                .scaledToFill()
                .frame(width: 100, height: 50)
                .cornerRadius(10)

            Text("Photo #\(index)")
                .bold()
        }
        .swipeActions {
            Button {
                print("Mark as favorite")
            } label: {
                Label("Favorite", systemImage: "star")
            }
            .tint(.yellow)

            Button {
                print("Delete")
            } label: {
                Label("Delete", systemImage: "trash")
            }
            .tint(.red)
        }
    }

}

以上的程式碼創建了兩個滑動按鈕，在使用者向左滑動一個 Row 時就會顯示出來。在預設情況下，SwiftUI 會為滑動操作提供完整的滑動支援。如果有多於一個滑動操作，第一個操作會自動被觸發。在上面的範例中，如果使用者對某一個 Row 進行 Full Swipe，就會執行 Mark as Favorite 操作。

.swipeActions 修飾符還讓我們指定滑動按鈕的位置。在預設情況下，SwiftUI 會將所有滑動按鈕添加到 List 的右側。我們可以將 edge 參數設置為 .leading，來將滑動按鈕移動到 List 的前端。

我們也可以附加兩個 .swipeActions 修飾符，來為 List 的兩側創建滑動按鈕，如下所示：

List {
    ForEach(1..<8) { index in

        HStack {
            Image("photo-\(index)")
                .resizable()
                .scaledToFill()
                .frame(width: 100, height: 50)
                .cornerRadius(10)

            Text("Photo #\(index)")
                .bold()
        }
        .swipeActions(edge: .trailing) {
            Button {
                print("Mark as favorite")
            } label: {
                Label("Favorite", systemImage: "star")
            }
            .tint(.yellow)

            Button {
                print("Delete")
            } label: {
                Label("Delete", systemImage: "trash")
            }
            .tint(.red)
        }
        .swipeActions(edge: .leading) {
            Button {
                print("Share")
            } label: {
                Label("Share", systemImage: "square.and.arrow.up")
            }
            .tint(.green)

        }
    }

}

總結

新版本的 SwiftUI 為 List 視圖帶來了一些改進。現在，我們只需要幾行程式碼，就可以輕鬆客製化分隔線的外觀，並將客製化滑動操作添加到 List 視圖。

請注意，所有程式碼都是在 Xcode 13 和 iOS 15 上進行測試的。