Question

于7月24日添加：

这行代码固定了详细视图中的空间。但是...在列表视图中，标题也变得小很多。

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

添加于7月23日：

感谢技巧，我取得了很多进步。特别是添加边框的技巧确实令人惊奇。您确切地知道会发生什么！

但是，Xcode Preview画布，模拟器和物理设备之间似乎有所不同。这是否是一个错误，因为-毕竟-它仍然是beta？还是我能做些什么？

您可以在图像中看到...仅在Xcode Preview画布中，视图会连接到屏幕顶部。

我相信它与标签栏有关。因为当我用选项卡栏查看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

还包括预览画布。我没有得到的是如何确保文本和图片与顶部（而不是中间）对齐。我尝试了垫片，填充物等。

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

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

Answer 1

考虑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 是实际上在顶部，但图像使它看起来好像不是。边界也可以很好地工作。

Answer 2

在最后一个文本之后添加一个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)

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

2 个答案: