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)

您可以为每一行设置不同的填充/插入，这是 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))
            }
        }
    }
}