Spacer() swiftui 留下一个空白答案

【问题标题】：Spacer() swiftui leaves a white spaceSpacer() swiftui 留下一个空白
【发布时间】：2021-10-02 16:35:46
【问题描述】：

我目前正在构建一个 UI，顶部有一个 250 像素高度的大红色框，其中包含信息和下方的滚动视图。我在 VStack() 中构建了这一切。我在 VStack 的底部放置了一个 spacer() 以将所有内容推到屏幕顶部。但它在顶部的红色容器和滚动视图之间有一个很大的空白区域。即使两者都没有任何填充（）。有谁知道这怎么可能？这是我的代码：

import SwiftUI

struct User: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        NavigationView {
            VStack {
                ...
                code
                ...
            }
            .frame(width: UIScreen.main.bounds.width, height: 250)
            .background(Color.red)
            .ignoresSafeArea()

            // somehow it has a white space here...

            ScrollView {
                LazyVGrid(columns: columns, spacing: 2) {
                    ForEach((0...56), id: \.self) {_ in
                        Image("testimage")
                            .resizable()
                            .scaleEffect(CGSize(width: 1.0, height: 2.0))
                            .scaledToFit()
                            .frame(minWidth: 0, maxWidth: .infinity, minHeight: 50)
                            .cornerRadius(10)
                         }.padding(.bottom, 75)
                        
                    }
                    .frame(width: UIScreen.main.bounds.width)
                    .padding(.top, -10)

                }
                .navigationBarTitle("")
                .navigationBarBackButtonHidden(true)
                .navigationBarHidden(true)
                
               // this Spacer should push everything to the top
                Spacer()
                
            }
        }  
    }
    .navigationBarTitle("")
    .navigationBarBackButtonHidden(true)
    .navigationBarHidden(true)
}
}

编辑：为了让我的问题更容易理解，我做了这个总结：我已经构建了一个包含 2 个项目的 VStack。两者之间有一个很大的空白，我不知道如何摆脱这个空白。如果我删除 .ignoresSafeArea() 空白消失。问题是我需要 .ignoresSafeArea() 来推动 VStack 中的第一项。有谁知道我可以做些什么来保留 .ignoresSafeArea() 但摆脱空白？

我添加了问题的屏幕截图。我给滚动视图设置了绿色背景，以便 VStack 和滚动视图之间的白色间距可见。

【问题讨论】：

我们无法用所提供的信息真正回答您的问题。请参阅：How do I ask a good question? 和 How to create a Minimal, Reproducible Example。
你在哪个平台上？根据您使用的平台/设备，将NavigationView 与两个孩子一起使用会产生截然不同的效果。无关提示：将.frame(width: UIScreen.main.bounds.width, height: 250) 更改为.frame(height: 250) 并尽量避免使用UIScreen。
@Yrb 我添加了一个小总结，试图让它更容易理解。
@jnpdx 我删除了 UIScreen。感谢您的反馈意见！我确实需要 navigationView 因为我有一个按钮链接到另一个视图
我没有问你是否需要它 - 我说它在不同平台上的行为不同，所以知道你在哪个平台上会很有帮助。

标签： swift swiftui

【解决方案1】：

您需要将所有内容以 0 间距嵌入到 VStack 中。

import SwiftUI

struct User: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                VStack {
                    Text("Hello World!") //Easier to test
                }
                .frame(height: 250) //Dont use UIScreen
                .background(Color.red)
                .ignoresSafeArea()

                // somehow it has a white space here...

                ScrollView {
                    LazyVGrid(columns: columns, spacing: 2) {
                        ForEach((0...56), id: \.self) {_ in
                            Image("testimage")
                                .resizable()
                                .scaleEffect(CGSize(width: 1.0, height: 2.0))
                                .scaledToFit()
                                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 50)
                                .cornerRadius(10)
                             }.padding(.bottom, 75)
                            
                        }
                        .frame(width: UIScreen.main.bounds.width)
                        .padding(.top, -10)

                }
                
                 Spacer()
            }
            .navigationBarTitle("")
            .navigationBarBackButtonHidden(true)
            .navigationBarHidden(true)
        }
    }
}

此外，您可能需要为 ScrollView 设置一个最大高度以将其向上推。 .frame(maxHeight: 175)

因为您没有给出可重现的示例或图像。我不能肯定地告诉你什么会起作用

【讨论】：

感谢您的评论！我试过了，但没有用。我添加了一个屏幕截图，以便问题更清楚。它与.ignoresafeaear() 有关。没有它就没有空格。

【解决方案2】：

我猜 Arnavs 的答案是正确的。注意：当您尝试在一个页面上实现多个视图时，90% 的情况下最好将它们放在一个 H/V/Z 堆栈中。

为了更好地理解，开始一个新项目并尝试......

Navigationview{
    VStack{
      Text("Hello Vertical World")
      Text("Hello Vertical World2")
    }

    HStack{
      Text("Hello Horizontal World")
      Text("Hello Horizontal World2")
    }
}

同样的东西，但“不同”

    NavigationView {
      VStack{
        Text("Hello Vertical World")
        Text("Hello Vertical World2")
        HStack{
            Text("Hello Horizontal World")
            Text("Hello Horizontal World2")
        }
    }
}

我无法仔细检查我是否正在使用手机，但这看起来应该非常不同。

【讨论】：

我没有，谢谢！不幸的是，它不能解决我的问题。

【解决方案3】：

我通过将 VStack 和 Scrollview 放在 navigationView 中的另一个 VStack 中解决了这个问题。然后我把 .ignoresSafeArea() 放到这个新的 VStack 上。

代码：

import SwiftUI

struct User: View {
    let columns = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]

    var body: some View {
        NavigationView {
            // new VStack that includes the topbar VStack, the 
            // scrollview and has the .ignoresSafeArea() on it.
            VStack {
                VStack {
                    ...
                    Code topbar
                    ...
                }
                .frame(width: UIScreen.main.bounds.width, height: 250)
                .background(Color.red)

                Scrollview {
                    ...
                    Code scrollview
                    ...
                }
                Spacer()
            }
            .ignoresSafeArea()
        }          
        .navigationBarTitle("")
        .navigationBarBackButtonHidden(true)
        .navigationBarHidden(true)
    }
}

【讨论】：