從 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)