时间戳

首页 > 解决方案 > SwiftUI 元素在视图之间向下移动

swiftui - SwiftUI 元素在视图之间向下移动

问题描述

我有两种看法

    import SwiftUI
import CoreData

struct ContentView: View {
    var body: some View {
        NavigationView {
            VStack {
                Image("qr-code")
                    .resizable()
                    .scaledToFit()
                    .position(x: 100, y: 100)
                    .offset(x: 100)
                Text("Thank you")
                    .position(x: 200)
            }.toolbar{
                ToolbarItemGroup(placement: .bottomBar) {
                    NavigationLink(destination: ContentView().navigationBarBackButtonHidden(true)) {
                        Text("Show QR")
                    }
                    Spacer()
                    NavigationLink(destination: CustomizeView().navigationBarBackButtonHidden(true)) {
                        Text("Customize")
                    }

                }
            }
        }
    }
}

struct CustomizeView: View {
    var body: some View {
            List {
                Section(header: Text("Important tasks")) {
                    Text("Task data goes here")
                    Text("Task data goes here")
                }
            }.toolbar{
                ToolbarItemGroup(placement: .bottomBar) {
                    NavigationLink(destination: ContentView().navigationBarBackButtonHidden(true)) {
                        Text("Show QR")
                    }
                    Spacer()
                    NavigationLink(destination: CustomizeView().navigationBarBackButtonHidden(true)) {
                        Text("Customize")
                    }
                }
            }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
        
            CustomizeView().environment(\.managedObjectContext, PersistenceController.preview.container.viewContext)
            
        }
    }
}

当我单击自定义并单击显示时，我看到图片向下移动。这是预期的行为吗？无论我点击了多少导航按钮，如何确保所有元素都位于相同的位置？

标签： swiftui

解决方案

您的视图层次结构中应该只有一个NavigationView。

现在，有NavigationViewsContentView和CustomizeView任何时候你用 导航到任何一个NavigationLink，它都会在视图中添加一个额外的导航栏，向下推你的内容。

要解决此问题，您的根视图可能只是s NavigationView，然后您的链接可以导航到不包含附加NavigationViews 的视图。

struct ContentView: View {
    var body: some View {
        NavigationView {
            BasicView()
        }
    }
}

struct BasicView : View {
    var body: some View {
        VStack {
            Image(systemName: "pencil")
                .resizable()
                .scaledToFit()
                .position(x: 100, y: 100)
                .offset(x: 100)
            Text("Thank you")
                .position(x: 200)
        }.toolbar{
            ToolbarItemGroup(placement: .bottomBar) {
                NavigationLink(destination: BasicView().navigationBarBackButtonHidden(true)) {
                    Text("Show QR")
                }
                Spacer()
                NavigationLink(destination: CustomizeView().navigationBarBackButtonHidden(true)) {
                    Text("Customize")
                }

            }
        }
    }
}

struct CustomizeView: View {
    var body: some View {
            List {
                Section(header: Text("Important tasks")) {
                    Text("Task data goes here")
                    Text("Task data goes here")
                }
            }.toolbar{
                ToolbarItemGroup(placement: .bottomBar) {
                    NavigationLink(destination: BasicView().navigationBarBackButtonHidden(true)) {
                        Text("Show QR")
                    }
                    Spacer()
                    NavigationLink(destination: CustomizeView().navigationBarBackButtonHidden(true)) {
                        Text("Customize")
                    }
                }
            }
    }
}

推荐阅读