繁体   English   中英

SwiftUI 导航为 iPad,它是如何工作的?

[英]SwiftUI Navigation for iPad, how does it work?

我正在学习 SwiftUI 并且有一个关于在 iPad 的视图之间创建导航的问题。 我在网上看到了很多教程,但展示了小型移动设备,但没有很多解决 iPad 导航理论和示例的内容。

--- 第 1 部分我有一个基本应用程序,我有一个“上一个”和“下一个”按钮,需要导航到下一个或上一个页面/视图。 我尝试使用 NavigationView/NavigationLink 路由,但似乎在 iPad 上效果不佳 - 根据我阅读的一篇文章。

任何人都会有一些资源或者我可以研究的例子来了解它是如何应用的。

--- PART 2另外,我想创建一个抽屉式滑出菜单。 有没有人有任何我可以查看的参考资源。

非常感谢大家。

在此处输入图像描述

示例代码:当我运行模拟器并单击 Next Page 时,没有任何反应。 我有另一个视图,其中结构称为 page_2,但它没有导航到它。

struct ContentView: View {
   var body: some View {
      NavigationView {
         ZStack {
            Image("iPad-bg")
                  .resizable(capInsets: EdgeInsets())
                  .ignoresSafeArea()
            VStack() {
                  HStack(alignment: .top) {
                     Spacer()
                     Button(action: {}) {
                        Image("menu-btn")
                              .resizable(capInsets: EdgeInsets())
                              .frame(width: 70.0, height: 70.0)
                              .padding(.trailing)
                     }
                     .padding(.top, -65)
                  }
                  Image("pg1-img1")
                     .padding(.top, -20.0)
                  HStack {
                     Button(action: {}) {
                        Text("Previous Page")
                           .foregroundColor(Color.white)
                     }
                     .padding(.vertical, 5.0)
                     .frame(width: 150.0)
                     .background(Color(red: 0.09, green: 0.10, blue: 0.21))
                     .cornerRadius(5.0)
                  Spacer()
                     NavigationLink(destination: page_2()){
                        Button(action: {}) {
                           Text("Next Page")
                              .foregroundColor(Color.white)
                        }
                        .padding(.vertical, 5.0)
                        .frame(width: 150.0)
                        .background(Color(red: 0.09, green: 0.10, blue: 0.21))
                        .cornerRadius(5.0)
                     }                     
                  }
                  .padding(.horizontal, 50.0)
                  Spacer()
            }
         }
      }
   }
}

您不能像这样创建NavigationLink 如果你想要一个看起来像 Button 的NavigationLink ,你可以使用这样的东西:

NavigationLink(destination: page_2()){
    Text("Next Page")
        .foregroundColor(Color.white)
}
.buttonStyle(.plain) // this is the important part
.padding(.vertical, 5.0)
.frame(width: 150.0)
.background(Color(red: 0.09, green: 0.10, blue: 0.21))
.cornerRadius(5.0)

作为提示:最好将此视图分解为多个子视图。 这不仅可以提高编码时的性能,还可以让您更好地推理您的代码。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM