list - SwiftUI - 使列表分隔线扩展到触摸屏边缘

Question

我正在使用 SwiftUI 中的列表。我无法弄清楚如何使行分隔符边到边。我已经尝试过 .edgesIgnoringSafeArea，但这似乎并不能解决问题。见下图:

注意列表线如何触及右边缘，而不是左边缘。

Answer 1

似乎没有合适的解决方案来特别控制分隔符，因此您必须有自己的解决方法。

我建议使用 EdgeInsets 来扩展行以到达边缘，因此分隔符。

然后您可以将您想要的填充添加到行的内容。

List(0..<10) { _ in
     HStack {
          Text("title")
           Spacer()
     }.background(Color.gray)
      .padding(.horizontal, 20)
 }.padding(EdgeInsets(top: 0, leading: -20, bottom: 0, trailing: -20))

最后的结果是这样的:

您还可以通过替换

进一步简化它

.padding(EdgeInsets(top: 0, leading: -20, bottom: 0, trailing: -20))

与

.padding(.horizontal, -20)

你可以为每一行设置不同的 padding/Inset，下面是 Apple 的 listRowInsets 文档中的代码片段

struct ContentView: View {
    enum Flavor: String, CaseIterable, Identifiable {
        var id: String { self.rawValue }
        case vanilla, chocolate, strawberry
    }

    var body: some View {
        List {
            ForEach(Flavor.allCases) {
                Text($0.rawValue)
                    .listRowInsets(.init(top: 0,
                                         leading: 25,
                                         bottom: 0,
                                         trailing: 0))
            }
        }
    }
}