SwiftUI - 列表：在 iOS 13+ 中隐藏分隔线

Question

I developed a chat screen using SwiftUI. The current minimum iOS version is 13.0.

To make the chat, I use the element List with ForEach. The problem is that the list shows the dividers, and I need to hide them:

I tried to hide the style of TableView but nothing works. Here's the code:

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())
            }
        }
    }
}

I'll be grateful for any help :)

Answer 1

Setting minimum iOS version to iOS 13 doesn't mean your code can't run on iOS 14 (and iOS 13 solutions for removing List separators don't work on iOS 14).

You need to use if #available(iOS 14, *) to specify which code use for which iOS version:

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)
        }
    }
}

---

Removing List separators:

• iOS 13 - How to remove the line separators from a List in SwiftUI without using ForEach?
• iOS 14 - How to remove List Separator lines in SwiftUI 2.0 in iOS 14

Answer 2

You can play around with some of the ListView styles. I think SidebarListStyle doesn't have any lines. Otherwise, you'll probably have to use a ScrollView and/or VStack instead of a List.

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