从 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 modePicker: some View {
  Picker("Mode", selection: $selection) { /* ... */ }
  .pickerStyle(SegmentedPickerStyle())
  .padding()
}

myList 是有问题的表格（黄色框内）：

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

我的尝试

• Removing the header of the list
• Hiding the Navigation Bar title
• Setting UITableView.appearance().tableHeaderView to an empty frame
• Attempting UITableView.appearance().contentInset.top = -35
• Setting listRowInsets（这会影响所有列表行）

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

感谢您的帮助！

Xcode 版本：12.5

Answer 1

为列表中的第一部分添加标题：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 2

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

在 iOS 上，分组列表样式显示更大的页眉和页脚 而不是简单的风格，它在视觉上拉开了成员的距离 不同的部分。

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

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

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

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

据我所知，这与PlainListStyle 的表现相同，但我认为您有特定的理由想要使用GroupedListStyle。