SwiftUI：删除左右列表视图上的space？

Question

我有以下列表视图：

var body: some View {
    NavigationView {
        List(items) { item in
            NavigationLink(destination: DetailsView(item: item)) {
                Text("\(item.name)")
            }
        }
        .listStyle(.plain)
        .navigationBarTitle("Title")
    }
}

显示如下：

我希望单元格粘在屏幕的最左侧，并使它们左侧的填充为 0。

我也希望右填充为 0...

我该怎么做？

Answer 1

我认为有多种方法。

.frame()
.offset()
自定义ScrollView()（但是没有列表的独有特性）

在下面的示例代码中，我在 .frame() 中提供了一个额外的宽度。

struct ContentView: View {
    
    var items = ["1","2","3","4","5"]
    
    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                NavigationLink(destination: Text("")) {
                    Text("\(item)")
                }
            }
            .listStyle(.plain)
            .navigationBarTitle("Title")
            .frame(width: UIScreen.main.bounds.width + 25)
        }
    }
}

在下面的示例代码中，我在 .offset()
中提供了一个额外的宽度但是在这种情况下，右侧的space

struct ContentView: View {
    
    var items = ["1","2","3","4","5"]
    
    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                NavigationLink(destination: Text("")) {
                    Text("\(item)")
                }
            }
            .listStyle(.plain)
            .navigationBarTitle("Title")
            .offset(x: -10)
        }
    }
}

Answer 2

所以，我终于找到了一种无需硬编码数字即可执行此操作的内置方法。我花了一些时间在文档中挖掘并发现了这个，listRowInsets:

@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
extension View {

    /// Applies an inset to the rows in a list.
    ///
    /// Use `listRowInsets(_:)` to change the default padding of the content of
    /// list items.
    ///
    /// In the example below, the `Flavor` enumeration provides content for list
    /// items. The SwiftUI ``ForEach`` structure computes views for each element
    /// of the `Flavor` enumeration and extracts the raw value of each of its
    /// elements using the resulting text to create each list row item. The
    /// `listRowInsets(_:)` modifier then changes the edge insets of each row
    /// of the list according to the ``EdgeInsets`` provided:
    ///
    ///     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([=10=].rawValue)
    ///                         .listRowInsets(.init(top: 0,
    ///                                              leading: 25,
    ///                                              bottom: 0,
    ///                                              trailing: 0))
    ///                 }
    ///             }
    ///         }
    ///     }
    ///
    /// ![A screenshot showing a list with leading 25 point inset on each
    ///  row.](SwiftUI-View-ListRowInsets.png)
    ///
    /// - Parameter insets: The ``EdgeInsets`` to apply to the edges of the
    ///   view.
    /// - Returns: A view that uses the given edge insets when used as a list
    ///   cell.
    @inlinable public func listRowInsets(_ insets: EdgeInsets?) -> some View

}

然后将我的代码更改为：

var body: some View {
    
    NavigationView {
        List {
            ForEach(sctions) { section in
                
                Section(header: Text(section.name)
                            .border(Color(.red))
                            .listRowInsets(.init(top: 0,
                                                 leading: 0,
                                                 bottom: 0,
                                                 trailing: 0))) {
                    
                    ForEach(section.items) { item in
                        Text("\(item.name)")
                            .listRowInsets(.init(top: 0,
                                                 leading: 0,
                                                 bottom: 0,
                                                 trailing: 0))
                            .border(Color(.green))
                    }
                    
                }
            }
            
        }
        .listStyle(.plain)
        .navigationBarTitle("Title")
    }
}

给我这个结果：

有趣的是，listRowInsets 在“单元格”上工作，但也在 header 部分工作，然后我就卡住了。我想让 header 部分也走到边缘，但原来不是。

希望这对其他人有帮助。

SwiftUI：删除左右列表视图上的space？

SwiftUI: remove the space on List view left and right?

listview

swiftui