SwiftUI 小技巧:簡單在列表視圖移除分隔線 (Line Separator)


SwiftUI 的列表視圖 (List View) 其實和 UIKit 的表格視圖 (Table View) 很類似,它們都是讓開發者把項目一列列地呈現,而預設設定上,每一列資料都會用分隔線 (line separator) 分開。在 UIKit 中,我們可以很簡單地改變分隔線的外觀與顏色;然而,SwiftUI 就沒有一個官方方法來移除分隔線。這麼一來,我們需要使用 UIKit API 來調整在 SwiftUI 列表視圖的分隔線。在本篇文章中,我們將會看看如何實作!

編者備註:如果你還不熟悉 SwiftUI,可以先閱讀我們的入門教學

在 UIKit 移除分隔線

在 UIKit 中,若要在表格視圖內隱藏或移除分隔線,我們可以把表格視圖的 separatorColor 屬性設為 .clear

tableView.separatorColor = .clear

或者,你也可以設定分隔線樣式 (Separator Style) 為 .none,來移除分隔線:

tableView.separatorStyle = .none

然而,如果你曾經在 SwiftUI 用過 List 視圖,就會知道它沒有一個可以移除分隔線或改變其外觀的修飾符 (modifier)。幸好,我們可以利用 UIKit API 來改變 List 視圖的外觀。

在 SwiftUI List 移除分隔線

要在 SwiftUI 移除分隔線,我們可以使用 onAppear 的方法來調整 List 視圖,並呼叫 UITableView 的 Appearance API 來移除分隔線:

.onAppear {
 UITableView.appearance().separatorStyle = .none
}

把上面的程式碼加到 List 之後,所有在列表視圖的分隔線都會被移除。

removing-line-separator-swiftui-list

這個調整會影響 App 內所有的列表視圖,也就是說所有列表視圖的分隔線都會被移除。這樣一來,如果有另一個列表視圖需要有分隔線,你就需要如此把分隔線樣式改回原本的設定:

.onAppear {
 UITableView.appearance().separatorStyle = .singleLine
}

建構一個客製化的視圖修飾符

為了讓這個在 SwiftUI 的技巧更好用,我們可以為分隔線樣式建立一個視圖修飾符

struct ListSeparatorStyle: ViewModifier {

    let style: UITableViewCell.SeparatorStyle

    func body(content: Content) -> some View {
        content
            .onAppear() {
                UITableView.appearance().separatorStyle = self.style
            }
    }
}

extension View {

    func listSeparatorStyle(style: UITableViewCell.SeparatorStyle) -> some View {
        ModifiedContent(content: self, modifier: ListSeparatorStyle(style: style))
    }
}

在上面的程式碼中,我們建立了一個名為 ListSeparatorStyle 的客製化視圖修飾符,可以用來調整分隔線樣式。現在,如果你想隱藏列表視圖的分隔線,你可以加入 ListSeparatorStyle 的程式碼:

List {

    ForEach(todoItems) { todoItem in
        ToDoListRow(todoItem: todoItem)
    }
    .onDelete(perform: deleteTask)

}
.listSeparatorStyle(style: .none)

而如果你想啟動分隔線,就可以向修飾符傳遞 .singleLine

希望未來 Apple 可以提供官方的方法,來控制分隔線的外觀。但現在,我們可以先使用這個小技巧來移除分隔線。

希望這篇教學文章可以幫到你。歡迎在下面留言與我們分享你的想法。

譯者簡介:Oliver Chen-工程師,喜歡美麗的事物,所以也愛上 Apple,目前在 iOS 程式設計上仍是新手,正研讀 Swift 與 Sketch 中。生活另一個身份是兩個孩子的爸,喜歡和孩子一起玩樂高,幻想著某天自己開發的 App,可以讓孩子覺得老爸好棒!。聯絡方式:電郵 [email protected]

原文:SwiftUI Tip: How to Remove Line Separator in List View


軟件工程師,AppCoda 創辦人。著有《iOS 13 App 程式設計實力超進化實戰攻略》、《iOS 13 App 程式設計實力超進化實戰攻略》以及《精通 SwiftUI》。曾任職於HSBC, FedEx等公司,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda,致力於iOS程式教學,產品設計及開發。

blog comments powered by Disqus
Shares
Share This