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

Question

7 月 24 日添加：

这行代码修复了详细视图中的空间。但是...在列表视图中，标题也变得更小了。

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

7 月 23 日添加：

感谢提示，我取得了很大进步。尤其是添加边框的技巧确实很神奇。你明白会发生什么！

但是，Xcode Preview 画布、模拟器和物理设备之间似乎存在差异。这是一个错误，因为 - 毕竟 - 它仍然是测试版吗？或者有什么我可以做的吗？

正如您在图片中看到的那样……只有在 Xcode 预览画布中，视图才连接到屏幕顶部。

我相信它与标签栏有关。因为当我用标签栏查看 Xcode Preview 画布时......上面的空间也在那里。知道如何摆脱它吗？

---

原帖：

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

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

还包括预览画布。我没有得到的是如何确保文本和照片与顶部（而不是中间）对齐。我尝试过使用 Spacers、padding 等。

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

添加： 在两个答案之后，我在最后一个文本之后添加了一个 Spacer() 。在预览画布中的 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
}

总而言之，从 inner 到 outer，你有一个水平堆叠的两个图像，它们彼此相距很远（间隔在它们之间）在一个“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)
}

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

• 从那里开始，一一添加您的Image 视图。添加类似的修饰符。
• 我没有你要渲染的具体图像，所以可以在各种东西上加上一个明显的背景颜色（橙色是我个人最喜欢的），看看上面的Image 是是否真的在顶部，但图像使它看起来好像不是。边框也可以很好地工作。