如何删除/调整列表中的分隔符？

Question

有没有办法List在 SwiftUI 中删除分隔符或调整分隔符插入？

在 UIKit 中可以通过

tableView.separatorStyle = .none

和

tableview.separatorInset = UIEdgeInsets(top: 0, left: 18, bottom: 0, right: 18)

相应的 SwiftUI 替代品是什么？

Answer 1

iOS 15.0+

Mac 催化剂 15.0+

listRowSeparator(_:edges:)

设置与该特定行关联的分隔符的显示模式。 https://developer.apple.com/

List {
    ForEach(0..<10, id: \.self) { number in
        Text("Text\(number)")
    }.listRowSeparator(.hidden)
}

iOS 14.0+

struct ListRowSeperatorModifier: ViewModifier {
    func body(content: Content) -> some View {
        if #available(iOS 15.0, *) {
            content.listRowSeparator(.hidden)
        } else {
            content.onAppear {
                UITableView.appearance().separatorStyle = .none
            }
            .onDisappear {
                UITableView.appearance().separatorStyle = .singleLine
            }
        }
    }
}


extension View {
    func hideListRowSeparator() -> some View  {
        return  self.modifier(ListRowSeperatorModifier())
    }
}

使用.hideListRowSeparator()于ForEach.

List {
    ForEach(0..<10, id: \.self) { number in
       Text("Text\(number)")
    }.hideListRowSeparator()
}

Answer 2

适用于 ios 13 不适用于 ios 14

您可以使用以下方法删除分隔符： UITableView.appearance().separatorStyle = .none in SwiftUI

只需添加

List() {
}.onAppear {
         UITableView.appearance().separatorColor = .clear
}

或者

struct SomeListView : View {
    init( ) {          
        UITableView.appearance().separatorStyle = .none
           }

    var body : some View {
        Text("TEST")
        }

struct CallList : View {
    var body : some View {

    List() {
    SomeListView()
    }
        }
}

Answer 3

对于后者你可以使用listRowInsets：

List { 
  Text("Item 1")
  Text("Item 2")
  Text("Item 3")
}
.listRowInsets(EdgeInsets(top: 0, left: 18, bottom: 0, right: 18))