SwiftUI 内容不显示在屏幕顶部

Question

我有一个NavigationView，然后是一个VStack。问题是里面的所有内容都VStack显示在屏幕中间而不是顶部。这是为什么？

var body: some View {
    VStack {
        VStack(alignment: .leading) {

            if (request?.receiverID ?? "") == userDataViewModel.userID {
                Text("\(sendertFirstName) wants to ship your package").font(.title)
            } else {
                Text("You want to ship \(recieverFirstName)'s package").font(.title)
            }

            HStack{
                Image(systemName: "clock.fill").font(.subheadline)
                Text("\(createdAt, formatter: DateService().shortTime)").font(.subheadline).foregroundColor(.secondary)
            }

            HStack {
                VStack(alignment: .leading) {
                    HStack {
                        Image(systemName: "person.fill").font(.subheadline)
                        Text(sendertFirstName).font(.subheadline).foregroundColor(.secondary)
                    }
                }

                Spacer()

                VStack(alignment: .leading) {
                    HStack {
                        Image(systemName: "star.fill")
                        Text(rating).font(.subheadline).foregroundColor(.secondary)
                    }
                }
            }
        }

        VStack(alignment: .center) {
            HStack {
                Button("Accept") {
                    //print(self.request.createdAt)
                    //FirestoreService().respondToRequest(request: self.request.documentReference, status: "accepted")
                }
                .padding()
                Button("Decline") {
                    //FirestoreService().respondToRequest(request: self.request.documentReference, status: "declined")
                }
                .foregroundColor(.red)
                .padding()
            }
        }

        ScrollView {
            ForEach(messages) { (message: Message) in
                if message.senderId == self.userDataViewModel.userID {
                    HStack {
                        Spacer()
                        Text(message.text).font(.subheadline).padding(7.5).background(self.blue).cornerRadius(30).foregroundColor(.white)
                    }.padding(.bottom, 2)
                } else {
                    HStack {
                        Text(message.text).font(.subheadline).padding(7.5).background(self.gray).cornerRadius(30).foregroundColor(.white)
                        Spacer()
                    }.padding(.bottom, 2)
                }

            }
        }

        HStack {
            TextField("Message", text: $inputMessage).padding(5).background(self.gray).cornerRadius(30).foregroundColor(.white)

            Button(action: {
                let msg: [String: Any] = [
                    "text": self.inputMessage,
                    "createdAt": Timestamp(),
                    "senderId": self.userDataViewModel.userID
                ]

                self.reference.updateData([
                    "messages": FieldValue.arrayUnion([msg])
                ])

                self.messages.append(Message(dictionary: msg))

                self.inputMessage = ""

            }) {
                Image(systemName: "arrow.up.circle.fill").foregroundColor(self.blue).font(.title)
            }
        }
        Spacer()
    }
    .padding()
    .border(Color.red)
}

我希望内容从顶部开始而不是从中间开始。我在这里做错了什么？

Answer 1

您不需要NavigationView- 现在您已将所有内容设置VStack为NavigationView两次，并且巨大的空白区域是第二个空导航栏。

默认情况下，大多数Views 仅占用所需的空间，并将它们放置在其父视图的中心。因此，如果您希望将内容放置在顶部，则需要添加Spacer()为最后一个元素VStack：

var body: some View {
    VStack {
        /* ... */
        Spacer()
    }
}

Spacer是罕见的一种View，它占用了父视图提供给它的所有空间，并将所有内容向上推。