SwiftUI - 減少列表中的額外空間

Question

我想在列表頂部有一些額外的空間，所以我嘗試在列表中使用 Spacer 並向其添加修飾符。 但是我沒有看到高度進一步降低。 以下是我的觀點的代碼。

自定義視圖：

import SwiftUI

struct CustomView: View {
    var body: some View {
        VStack {
            List {
                Spacer()
                    .frame(minHeight: 1, idealHeight: 1, maxHeight: 2)
                    .fixedSize().listRowBackground(Color.clear)
                
                UserLoginDetailsRowView().padding(.init(top: 0, leading: 5, bottom: 5, trailing: 5))
                
                ForEach(1..<2) { _ in
                    VStack(alignment: .leading) {
                        Text("App version").fixedSize(horizontal: false, vertical: true).font(.headline).foregroundColor(.white)
                        Text("1.1.0").fixedSize(horizontal: false, vertical: true).font(.subheadline).foregroundColor(.white)
                        Spacer()
                    }.padding(.bottom, 15)
                }.listRowBackground(Color.clear)
            }
        }.navigationBarTitle("Main Menu")
    }
}

UserLoginDetailsRow查看代碼：

import SwiftUI

struct UserLoginDetailsRowView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack(alignment: .center) {
                Spacer()
                Spacer()
                Text("User's full name").lineLimit(2).font(.headline)
                Text("Username").lineLimit(2).font(.subheadline)
                Spacer()
            }
            
            ZStack {
                Image("user-gray")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 30 , height: 30)
                    .offset(x: geometry.size.width / 2.8, y: -geometry.size.height/4)
            }
        }.frame(minHeight: 60.0)
    }
}

這是使用此代碼的外觀：

無論我對 CustomView 中 Spacer() 中的 minHeight、idealHeight 和 maxHeight 進行什么更改，結果都保持不變。 但是我想要它當前顯示的空間的一半。 我什至嘗試用 VStack 替換 Spacer() 並為其設置幀高度修改器，但至少，我總是看到這么多空間。 我希望空間減少一半。

如果我從 CustomView 中刪除 Spacer()，那么我的自定義行上的圖像會被切掉，看起來像這樣。 如何將空間減少到現在的一半？

添加游樂場源代碼：

import SwiftUI
import PlaygroundSupport

struct CustomView: View {
    var body: some View {
        VStack {
            Spacer().frame(minHeight: 25, idealHeight: 25, maxHeight: 30).fixedSize().listRowBackground(Color.clear)

            List {
                // Extra space for the top half of user icon within UserLoginDetailsRowView.
//                Spacer().frame(minHeight: 25, idealHeight: 25, maxHeight: 30).fixedSize().listRowBackground(Color.clear)
                UserLoginDetailsRowView().padding(.init(top: 0, leading: 5, bottom: 5, trailing: 5))
                
                ForEach(1..<2) { _ in
                    VStack(alignment: .leading) {
                        Text("App Version").fixedSize(horizontal: false, vertical: true).font(.headline).foregroundColor(.white)
                        Text("1.1.0").fixedSize(horizontal: false, vertical: true).font(.subheadline).foregroundColor(.white)
                        Spacer()
                    }.padding(.bottom, 15)
                }.listRowBackground(Color.clear)
            }
        }.navigationBarTitle("Back")
    }
}

struct UserLoginDetailsRowView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack(alignment: .center) {
                Spacer()
                Spacer()
                Text("User's full name").lineLimit(2).font(.headline)
                Text("Username").lineLimit(2).font(.subheadline)
                Spacer()
            }
            
            ZStack {
                Image(systemName: "person.circle")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 22 , height: 22)
                    .offset(x: geometry.size.width / 2.8, y: -geometry.size.height/4)
            }
        }.frame(minHeight: 60.0)
    }
}

PlaygroundPage.current.setLiveView(CustomView())

Answer 1

解決方案

主要差距來自列表樣式本身。 如果您將.listStyle(PlainListStyle())應用於List ，它將減少到您正在尋找的內容。

List { ... }.listStyle(PlainListStyle())

如果您想進一步減少它並將其控制到最后一個像素， .onAppear修飾符應用於列表並將內容插圖設置為您想要的值。

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

在上面的代碼中，值60本質上是任意的，您需要嘗試獲得適合您 UI 的值。

解釋

List默認樣式添加了一個更大的標題，它會創建您遇到問題的間距，此行為類似於GroupedListStyle 。 從文檔

在 iOS 上，分組列表樣式比普通樣式顯示更大的頁眉和頁腳，這在視覺上拉開了不同部分的成員的距離。

您可以使用文檔中的其他列表樣式來更好地滿足您的需求。

完整的游樂場代碼 - 對於.onAppear解決方案

import SwiftUI
import PlaygroundSupport

struct CustomView: View {
    var body: some View {
        VStack(alignment:.leading, spacing:0) {
            
            List {
                // Extra space for the top half of user icon within UserLoginDetailsRowView.
                Spacer().frame(minHeight: 1, idealHeight: 1, maxHeight: 2)
                              .fixedSize().listRowBackground(Color.clear)
                UserLoginDetailsRowView().padding(.init(top: 0, leading: 5, bottom: 5, trailing: 5))
                
                
                ForEach(1..<2) { _ in
                    VStack(alignment: .leading) {
                        Text("App Version").fixedSize(horizontal: false, vertical: true).font(.headline).foregroundColor(.white)
                        Text("1.1.0").fixedSize(horizontal: false, vertical: true).font(.subheadline).foregroundColor(.white)
                        Spacer()
                    }.padding(.bottom, 15)
                }.listRowBackground(Color.clear)
            }.onAppear(perform: {
                UITableView.appearance().contentInset.top = -60
            })
        }.navigationBarTitle("Back")
    }
}

struct UserLoginDetailsRowView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack(alignment: .center) {
                Spacer()
                Spacer()
                Text("User's full name").lineLimit(2).font(.headline)
                Text("Username").lineLimit(2).font(.subheadline)
                Spacer()
            }
            
            ZStack {
                Image(systemName: "person.circle")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 22 , height: 22)
                    .offset(x: geometry.size.width / 2.8, y: -geometry.size.height/4)
            }
        }.frame(minHeight: 60.0)
    }
}

PlaygroundPage.current.setLiveView(CustomView())