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

Question

我在 Stack Overflow 上看到过类似的问题，但其中 none 能够回答我的问题。

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

这是 VStack 中的 VStack 中的 NavigationView 中的 List，通过 fullscreenCover:

显示

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())
}

我试过的

Removing the header of the list
Hiding the Navigation Bar title
（这会影响所有列表行）

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

也会出现此填充问题

感谢您的帮助！

Xcode版本：12.5

Answer 1

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

On iOS, the grouped list style displays a larger header and footer than the plain style, which visually distances the members of different sections.

你说你试过这个，但它对我有用（Xcode 12.5.1）：

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

您还可以隐藏列表 header，方法是使用 ZStack，列表位于堆栈底部，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

给列表的第一部分打一个 header：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 中有一些视图和一个列表，我有一个不需要的 space 出现在我的列表顶部。在我的例子中，我需要将 VStack 间距设置为 0，这解决了问题，因为它实际上只是与 VStack 的间距。

VStack(spacing: 0) { ... }

Answer 4

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

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

这似乎是正确的方法。

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

Remove top padding from `List` in SwiftUI

ios

swift

swiftui

swiftui-list