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 中两次，并且巨大的空白是第二个空的导航栏。

默认情况下，大多数 View 只占用它们需要的空间，并且它们被放置在它们父 View 的中心。所以如果你想让你的内容放在顶部，你需要添加 Spacer() 作为你的 VStack 中的最后一个元素:

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

Spacer 是为数不多的 View 之一，它占用父 View 提供给它的所有空间，并将您的所有内容向上推。