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

SwiftUI 的列表視圖 (List View) 其實和 UIKit 的表格視圖 (Table View) 很類似，它們都是讓開發者把項目一列列地呈現，而預設設定上，每一列資料都會用分隔線 (line separator) 分開。在 UIKit 中，我們可以很簡單地改變分隔線的外觀與顏色；然而，SwiftUI 就沒有一個官方方法來移除分隔線。這麼一來，我們需要使用 UIKit API 來調整在 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 之後，所有在列表視圖的分隔線都會被移除。

這個調整會影響 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 可以提供官方的方法，來控制分隔線的外觀。但現在，我們可以先使用這個小技巧來移除分隔線。

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