详细列表视图-顶对齐问题

Question

在7月24日加上：

这一行代码修复了细节视图中的空间。然而..。在列表视图中，标题也变得更小了。

.navigationBarTitle(Text("Egg management"), displayMode: .inline)

在7月23日加上：

多亏了这些技巧，我取得了很大的进步。特别是添加边框的提示会带来奇迹。你知道到底发生了什么！

但是，Xcode预览画布、模拟器和物理设备之间似乎有区别。这是因为-after的所有-它仍然是测试版的错误吗？还是有什么我能做的？

就像你在图片里看到的..。只有在Xcode预览画布中，视图才连接到屏幕顶部。

我相信这和制表板有关。因为当我看Xcode预览画布的时候.上面的空间也在那里。知道怎么摆脱它吗？

​

​

原文：

这是详细列表视图的代码：

import SwiftUI

struct ContentDetail : View {

    @State var photo = true

    var text = "Een kip ..."
    var imageList = "Dag-3"
    var day = "3.circle"
    var date = "9 augustus 2019"
    var imageDetail = "Day-3"
    var weight = "35.48"

    var body: some View {

        VStack (alignment: .center, spacing: 10) {

            Text(date)
                .font(.title)
                .fontWeight(.medium)

            ZStack (alignment: .topLeading){

                Image(photo ? imageDetail : imageList)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .background(Color.black)
                    .padding(.trailing, 0)
                    .tapAction {
                        self.photo.toggle() }

                HStack {
                    Image(systemName: day)
                        .resizable()
                        .padding(.leading, 10)
                        .padding(.top, 10)
                        .frame(width: 40, height: 32)
                        .foregroundColor(.white)

                    Spacer()

                    Image(systemName: photo ?  "photo" : "pencil.circle")
                        .resizable()
                        .padding(.trailing, 10)
                        .padding(.top, 10)
                        .frame(width: 32, height: 32)
                        .foregroundColor(.white)
                }
            }

            Text(text)
                .lineLimit(6)
                .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                .padding(.leading, 6)

        } .padding(20)

    }
}

#if DEBUG
struct ContentDetail_Previews : PreviewProvider {
    static var previews: some View {
        ContentDetail()
    }
}
#endif

还包括预览画布。我不明白的是如何确保文本和照片与顶部对齐(而不是中间)。我试过用垫子，垫子等。

我想我一定是在监督一些小事情..。但。谁能给我指明正确的方向吗？谢谢。

添加:在这两个答案之后，我在最后一个文本之后添加了一个空格()。在预览画布中的Xcode中，现在一切看起来都很好。但是在我连接的iPhone 7 Plus上有一些问题:视图与顶部不对齐，图像被裁剪(右边的图标消失了；右边是白色的)。

Answer 1

在最后一个文本之后添加一个Spacer()会将所有内容移到顶部。在iPhone Xr模拟器上测试(而不是预览)。

​

​

   ...

   Text(text)
       .lineLimit(6)
       .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
       .padding(.leading, 6)

   Spacer()
}

要移除顶部的空间：

    VStack {
        ...
    }
    .padding(20)
    .navigationBarTitle("TITLE", displayMode: .inline)

Answer 2

从Spacer()所做的事情来考虑。它“移动”视图尽可能远-至少，没有一个特定的空间。

所以你有这个：

VStack {
    Text
    ZStack {
        Image
        HStack {
            Image
            Spacer()
            Image
        }
    }
    Text
}

总之，从内到外，您有一个水平堆栈，两个图像放置在一个"Z轴“堆栈的内部(间隔在它们之间)，该堆栈将图像放在上面，在上面放置一些文本的垂直堆栈中。

因此，如果要将垂直堆栈中的所有内容移到顶部，只需添加最后一个间隔：

VStack {
    Text
    ZStack {
        Image
        HStack {
            Image
            Spacer()
            Image
        }
    }
    Text
    Spacer() // <-- ADD THIS
}

最后注意:不要害怕在你的视图中添加额外的“堆栈”。就内存占用而言，它实际上只是一个没有性能影响的单一视图。

编辑：，我取了您的原始视图，并将所有内容更改为占位符.

var body: some View {
    VStack (alignment: .center, spacing: 10) {
        Text("Text #1")
            .font(.title)
            .fontWeight(.medium)
        ZStack (alignment: .topLeading) {
            Text( "Image #1")
            HStack {
                Text("Image #2")
                Spacer()
                Text("Image #3")
            }
        }
        Text("Text #2")
            .lineLimit(6)
            .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
            .padding(.leading, 6)
    } .padding(20)
}

正如预期的那样，一切都是垂直中心的。在“文本#2”下面添加一个Spacer()会将所有内容抛到顶部。有几个想法：

• 从那里开始，然后逐个添加您的Image视图。添加类似的修饰符。
• 我没有你正在渲染的特定图像，所以可能会在不同的东西上加一个明显的背景色(橙色是我个人最喜欢的)，看看上面的Image 是否真的是，但这张图片让它看起来好像不是。边框也会很好。