SwiftUI 框架

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

在 WWDC 21,Apple 為 SwiftUI 框架的 List 視圖帶來了一些改進。現在,我們只需要幾行程式碼,就可以輕鬆客製化分隔線 (line separator) 的外觀,並將客製化滑動動作 (swipe action) 添加到 List 視圖。在這篇教學文章中,我們會帶大家看看兩個新的修飾符。
iOS 15 的 SwiftUI :在 List 視圖中添加滑動動作及隱藏分隔線
iOS 15 的 SwiftUI :在 List 視圖中添加滑動動作及隱藏分隔線
In: SwiftUI 框架

在 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 視圖中隱藏分隔線

swiftui-list-line-separator-ios15

要在 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)

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

swiftui-ios15-line-separator-hidden

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

swiftui-list-row-separator-color

在 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 創建客製化滑動操作

swiftui-swipe-actions

在 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 的前端。

swiftui-swipe-leading-actions

我們也可以附加兩個 .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 上進行測試的。

譯者簡介:Kelly Chan-AppCoda 編輯小姐。
原文SwiftUI for iOS 15: How to Add Swipe Actions and Hide Line Separators in List View

作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 17 App 程式設計實戰心法》、《iOS 17 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。