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

【问题标题】：SwiftUI - Make List Divider Line Expand To Touch Screen EdgesSwiftUI - 使列表分隔线扩展到触摸屏边缘
【发布时间】：2021-07-17 21:58:29
【问题描述】：

我正在使用 SwiftUI 中的列表。我不知道如何使行分隔符边到边。我已经尝试过 .edgesIgnoringSafeArea，但这似乎不起作用。见下图：

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

【问题讨论】：

尝试使用“Divider().ignoresSafeArea()”或其变体，例如“Divider().ignoresSafeArea(.all, edges: .horizontal)”

标签： list swiftui

【解决方案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 文档中的代码 sn-p 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))
            }
        }
    }
}

【讨论】：