从 SwiftUI 中的“列表”中删除顶部填充

Question

我在 Stack Overflow 上看到过类似的问题，但没有一个能够回答我的问题。

我创建了一个List ，但我想删除List内容上方的填充空间（用红色箭头标记）。 使用GroupedListStyle时如何删除它？

这是通过fullscreenCover显示的NavigationView内的VStack内的List ：

var body: some View {
  NavigationView {
    VStack {
      taskEventPicker
      myList
    }
    .navigationBarTitle("Add Task", displayMode: .inline)
  }
}

其中taskEventPicker是一个分段的Picker （以绿色框起来）：

var taskEventPicker: some View {
  Picker("Mode", selection: $selection) { /* ... */ }
  .pickerStyle(SegmentedPickerStyle())
  .padding()
}

和myList是有问题的形式（黄色框）：

var myList: some View {
  List { /* ... */ }
  .listStyle(GroupedListStyle())
}

我试过的

• 删除列表的 header
• 隐藏导航栏标题
• 将UITableView.appearance().tableHeaderView设置为空框架
• 尝试UITableView.appearance().contentInset.top = -35
• 设置listRowInsets （这会影响所有列表行）

注意：我正在寻找可以适用于GroupedListStyle的答案。 我了解PlainListStyle不会出现此问题。 默认listStyle也会出现此填充问题。

谢谢您的帮助！

Xcode 版本：12.5

Answer 1

首先，我想说GroupedListStyle正在按预期工作。

在 iOS 上，分组列表样式比普通样式显示更大的页眉和页脚，这在视觉上拉开了不同部分的成员的距离。

你说你已经尝试过了，但它对我有用（Xcode 12.5.1）：

    List { ... }    
    .onAppear(perform: {
        UITableView.appearance().contentInset.top = -35
    })

您还可以隐藏列表标题，方法是使用ZStack ，List 位于堆栈底部， Picker位于顶部。 Picker 确实具有透明度，因此您还必须添加一个不透明的视图作为Picker的背景。

var body: some View {
    NavigationView {
        ZStack(alignment: .top) {
            List { ... }
            .listStyle(.grouped)
            .padding(.top, 30)
            
            Color.white
                .frame(height: 65)
            
            Picker { ... }
            .pickerStyle(.segmented)
            .padding()
        }
        .navigationBarTitle("Add Task", displayMode: .inline)
    }
}

据我所见，这与PlainListStyle看起来一样，但我认为您有特定的理由想要使用GroupedListStyle 。

Answer 2

为列表中的第一部分提供标题： Section(header: Spacer(minLength: 0))

免责声明：这并没有完全消除顶部间距，但它确实产生了与本机设置应用程序相同的结果。

注意：这在 iOS 14.5 上对我有用

VStack {
    List {
        Section(header: Spacer(minLength: 0)) {
            Text(verbatim: "First Section")
        }

        Section {
            Text(verbatim: "Second Section")
        }
    }
    .listStyle(GroupedListStyle())
}

Answer 3

我有一个类似的设置，我在 VStack 中有一些视图和一个列表，并且我有一个不想要的空间出现在我的列表顶部。 在我的情况下，我需要将 VStack 间距设置为 0，这解决了这个问题，因为它实际上只是与 VStack 的间距。

VStack(spacing: 0) { ... }

Answer 4

我的 2 美分。 我出于同样的原因来到这里。

看看： https ://developer.apple.com/forums/thread/662544

这似乎是正确的方法。

Answer 5

已接受答案的contentInsent部分工作得非常好，除非例如在我的情况下，在导航堆栈的末尾，您想在包含带有navigationBarTitleDisplayMode设置为.inline的List的详细视图中使用它。 当使用另一个List将navigationBarTitleDisplayMode设置为.large在堆栈中导航回视图时， List内容和NavigationBar非常交错。 他们可能还不如做任何navigationBarTitleDisplayMode设置的事情。

在我的情况下切换到listStyle(.plain)不是一个可行的选择，因为然后在详细视图中，我失去了与 List 的EditMode之间的精美动画内置转换，这似乎只存在于分组的listStyle品种中。

最后，经过几天的挫折后，我发现tableHeaderView是最适合我的问题的方法 - 当然，它同样适用于解决原始问题。 这一切都在这里......：

XCode 文档

...在这句话中：

“将视图分配给此属性 [即tableHeaderView ] 时，将该视图的高度设置为非零值”

所以我喜欢：

List {
  // bla bla bla
}
.listStyle(.grouped)
.onAppear {
  let tableHeaderView = UIView(frame: .zero)
  tableHeaderView.frame.size.height = 1
  UITableView.appearance().tableHeaderView = tableHeaderView
}

就这么简单。 希望它也能帮助你！

Answer 6

extension View {
    /// Clear tableview and cell color
    func tableClearColor() {
        let tableHeaderView = UIView(frame: .zero)
        tableHeaderView.frame.size.height = 0.5
        UITableView.appearance().tableHeaderView = tableHeaderView
    }
}

Answer 7

List {
 ...
}
.headerTopPadding(padding: 0)