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

Question

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

在 UIKit 中可以通过

tableView.separatorStyle = .none

和

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

对应的 SwiftUI 替代方案是什么？

Answer 1

对于 ios 13 不适用于 ios 14

您可以使用以下方法删除分隔符： UITableView.appearance().separatorStyle = .none 在 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 2

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 2.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 3

这一切都可以在 SwiftUI 中完成

与 UIKit 中的旧方法相比，要删除分隔符，请tableView.separatorStyle = .none在 init 或表格视图的 onAppear 方法中添加以下行：

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

要与 UIKit 中的行相比调整分隔符插入，请tableview.separatorInset = UIEdgeInsets(top: 0, left: 18, bottom: 0, right: 18)在 init 或 onAppear 方法中添加此行：

List(...){
    ...
}.onAppear() {
    UITableView.appearance().separatorInset = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 50)
}

Answer 4

在SwiftUI 中：

删除分隔符

 init() {

    UITableView.appearance().separatorStyle = .none //remove separators

 }

 var body: some View {

    List {

        Text("Index 1")
        Text("Index 2")
        Text("Index 3")
        Text("Index 4")
    }

 }

Answer 5

对于后者，您可以使用listRowInsets：

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