SwiftUI NavigationView 布局问题

Question

我在使用 SwiftUI 时的 NavigationView 和 Title 从未出现在我希望它们在运行在设备或模拟器上出现的位置。我希望它们几乎位于左上角的后退按钮下方，但是当运行在设备或模拟器上时，它会在页面下方很远的地方，这是我的模拟器在预览旁边调整大小的屏幕截图，您可以看到这有多么不同。

这是我的代码：

import SwiftUI

struct DetailView: View {
    let tarot: Tarot
    var body: some View {
        NavigationView {
            VStack() {
                Image(tarot.tarotImage)
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 200, height: 200)
                    .padding(.init(top: 80, leading: 30, bottom: 80, trailing: 30))
                Text(tarot.tarotDescription)
                    .padding(.horizontal)
            }
            .navigationBarTitle(tarot.tarotName, displayMode: .automatic)
        }
    }
}

struct DetailView_Previews: PreviewProvider {
    static var previews: some View {
        DetailView(tarot: cardsArray[0])
    }
}

Answer 1

您的导航堆栈中不应超过一个 NavigationView。

尝试从您的 DetailView 中删除 NavigationView:

struct DetailView: View {
    let tarot: Tarot
    var body: some View {
        VStack {
            Image(tarot.tarotImage)
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: 200, height: 200)
                .padding(.init(top: 80, leading: 30, bottom: 80, trailing: 30))
            Text(tarot.tarotDescription)
                .padding(.horizontal)
        }
        .navigationBarTitle(tarot.tarotName, displayMode: .automatic)
    }
}

SwiftUI NavigationView 布局问题

SwiftUI NavigationView layout issues

swiftui

navigationbar

navigationview