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

Question

7 月 24 日添加：

这行代码修复了详细视图中的 space。但是...在列表视图中，标题也变小了很多。

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

7 月 23 日添加：

感谢提示，我取得了很大进步。特别是添加边框的提示确实很神奇。你看看到底发生了什么！

不过，Xcode预览版canvas、模拟器和实体机之间似乎存在差异。这是一个错误，因为毕竟它仍然是测试版吗？或者有什么我可以做的吗？

正如您在图像中看到的...仅在 Xcode 预览 canvas 视图连接到屏幕顶部。

我认为这与标签栏有关。因为当我用标签栏查看 Xcode 预览 canvas 时...上面的 space 也在那里。知道如何摆脱它吗？

原贴：

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

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

还包括预览 canvas。我不明白的是如何确保文本和照片对齐到顶部（而不是中间）。我尝试使用垫片、填充物等

我想我一定是在监督一些小事……但是。有人能指出我正确的方向吗？谢谢。

添加：在这两个答案之后，我在最后一个文本之后添加了一个 Spacer() 。在 Xcode 的预览 canvas 中，现在一切正常。但是在我连接的 iPhone 7 Plus 上有一些问题：视图没有与顶部对齐，并且图像被裁剪了（右边的图标消失了；右边的白色条带）。

Answer 1

想想 Spacer() 的作用。它 "moves" 视图尽可能远 - 至少，没有特定的 space.

所以你有这个：

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

总而言之，从 inner 到 outer，你有两个图像的水平堆叠放置得尽可能远（spacer 在它们之间）在 "Z axis" 堆栈内，在它们上面放置图像，在垂直堆栈内，上面有一些文本。

因此，如果您想将垂直堆栈中的所有内容移动到顶部，您只需要最后添加一个 spacer:

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

最后一点：不要害怕在您的视图中添加额外的 "stacks"。就内存占用而言，它实际上只是一个单个视图，没有性能影响。

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

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

正如预期的那样，所有内容都垂直居中。在 "Text #2" 下面添加一个 Spacer() 会将所有内容都抛到顶部。几个想法：

从这里开始，逐一添加您的 Image 观看次数。也添加这样的修饰符。
我没有你正在渲染的具体图像，所以也许可以在各种东西上放一个明显的背景颜色（橙色是我个人最喜欢的），看看顶部 Image 是不是 实际上在最上面，但图像使它看起来好像不是。边框也可以很好地工作。

Answer 2

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

   ...

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

   Spacer()
}

要删除顶部的 space：

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

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

Detailed list view - top alignment question

swiftui