SwiftUI - 列表：在 iOS 13+ 中隱藏分隔線

Question

我使用 SwiftUI 開發了一個聊天屏幕。 當前的最低 iOS 版本是 13.0。

為了進行聊天，我將元素 List 與 ForEach 一起使用。 問題是列表顯示了分隔符，我需要隱藏它們：

我試圖隱藏 TableView 的樣式，但沒有任何效果。 這是代碼：

struct MessagesView: View {

    var messages: [MessageModel] = []

    init() {
        // To remove only extra separators below the list:
        UITableView.appearance().tableFooterView = UIView()
        // To remove all separators including the actual ones:
        UITableView.appearance().separatorStyle = .none
    }
    
    var body: some View {
        List {
            ForEach(messages, id: \.messageId) { message in
                Group {
                    if(messPack.user != nil) {
                        ReceivedMessageView(
                            message: message.message,
                            name: message.user?.name,
                            color: message.user?.color)
                    } else {
                        SentMessageView(message: messPack.message)
                    }
                }.listRowInsets(EdgeInsets())
            }
        }
    }
}

我將不勝感激任何幫助:)

Answer 1

將最低 iOS 版本設置為 iOS 13 並不意味着您的代碼不能在 iOS 14 上運行（用於刪除列表分隔符的 iOS 13 解決方案不適用於 iOS 14）。

您需要使用if #available(iOS 14, *)來指定哪個代碼用於哪個 iOS 版本：

struct MessagesView: View {
    var messages: [MessageModel] = []

    init() {
        UITableView.appearance().tableFooterView = UIView()
        UITableView.appearance().separatorStyle = .none
    }

    var body: some View {
        List {
            ForEach(messages, id: \.messageId) { message in
                Group {
                    if #available(iOS 14, *) {
                        messageView(for: message)
                            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
                            .listRowInsets(EdgeInsets())
                            .background(Color.white)
                    } else {
                        messageView(for: message)
                    }
                }
            }
        }
    }

    @ViewBuilder
    func messageView(for message: MessageModel) -> some View {
        if messPack.user != nil {
            ReceivedMessageView(
                message: message.message,
                name: message.user?.name,
                color: message.user?.color
            )
        } else {
            SentMessageView(message: messPack.message)
        }
    }
}

---

刪除List分隔符：

• iOS 13 -如何在不使用 ForEach 的情況下從 SwiftUI 的列表中刪除行分隔符？
• iOS 14 -如何在 iOS 14 中刪除 SwiftUI 2.0 中的列表分隔符行

Answer 2

您可以使用一些 ListView 樣式。 我認為 SidebarListStyle 沒有任何線條。 否則，您可能必須使用 ScrollView 和/或 VStack 而不是 List。

    List {
        Text("ONE")
        Text("TWO")
        Text("THREE")
    }
    .listStyle(SidebarListStyle())