SwiftUI - 图像偏移预览问题

Question

我有一个导航视图，它是一个根视图。用户登录后，我想在我想显示用户图像和用户名的地方显示欢迎视图。

目前预览与我的设备屏幕有点不同：

您可能会注意到模拟器屏幕上有一个登录返回按钮。可能这就是我在这里有差异的原因。

这是我的代码：

struct WelcomeView: View {
    @EnvironmentObject var userService: UserService
    var body: some View {
        VStack {
            Image("MountainWelcomBackground").resizable().frame(height: 300).edgesIgnoringSafeArea(.top)

            CircleImage(image: userService.user.image!)
                .offset(y: -220)
                .frame(height: 140)
                .frame(width: 140)

            VStack(alignment: .leading) {
                HStack(alignment: .top) {
                    Spacer()
                    Text(userService.user.username)
                        .font(.headline)
                    Spacer()
                }
            }
            .offset(y: -200)

            Spacer()
        }
    }
}

struct WelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        let userService = UserService()
        userService.user = User(username: "Alex Matrosov", email: "test.developer@gmail.com", avatar: nil, image: Image("ManPlaceholderAvatar"))

        return WelcomeView().environmentObject(userService)
    }
}

struct CircleImage: View {
    var image: Image
    var body: some View {
        image
            .resizable()
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.white, lineWidth: 4))
            .shadow(radius: 10)
            .aspectRatio(contentMode: .fit)
    }
}

如何使预览与模拟器上的一样？可能我需要添加导航视图以某种方式预览，或者我以错误的方式设置偏移量。其实我只是跟着苹果swiftui教程，他们像我一样做这个ui。

Answer 1

偏移量取决于父容器，对于在模拟器中运行的真实应用和仅显示欢迎视图的预览，您的情况会有所不同。

这里是 PreviewProvided 有相同的

struct WelcomeView_Previews: PreviewProvider {
    static var previews: some View {
        let userService = UserService()
        userService.user = User(username: "Alex Matrosov", email: "test.developer@gmail.com", avatar: nil, image: Image("icon"))

        return NavigationView { 
            WelcomeView().environmentObject(userService) 
        }
    }
}