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

Posted 2023-02-24

【中文标题】SwiftUI - 使列表分隔线扩展到触摸屏边缘

【英文标题】：SwiftUI - Make List Divider Line Expand To Touch Screen Edges

【发布时间】：2021-07-17 21:58:29

【问题描述】：

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

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

【问题讨论】：

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

【参考方案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))