我有一个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)
}

字符串
我希望内容从顶部开始，而不是中间。我做错什么了？

的数据