锐客网

  1. 首页 > it技术 > >

SwiftUI|SwiftUI 布局（使用两个并排视图）



UISplitViewController是UIKit中最重要的UI组件之一，您会在许多Apple应用程序中看到它，例如 Notes，Mail 等。在iPad上，拆分视图并排显示两个视图，通常在左侧有一个主列表，在右侧有一个详细视图。在iPhone上，拆分视图会自动将两个视图折叠为一个视图，因此您会获得导航视图的 push 和 pop 行为。
【SwiftUI|SwiftUI 布局（使用两个并排视图）】SwiftUI没有与拆分视图控制器直接等效的功能，而是通过创造性地使用NavigationView使相同的功能可用。您已经熟悉NavigationView的基本用法，它使我们能够创建如下视图：

struct ContentView: View { var body: some View { NavigationView { Text("Hello, World!") .navigationBarTitle("Primary") } } }

以前，您已经了解了在纵向模式下如何工作，但是在横向模式下会导致白屏。这是由于NavigationView的分割视图行为：它设计为可用于两个视图而不是一个视图，现在，SwiftUI似乎并不在乎是否仅提供一个。
但是，如果我们确实提供了两个视图，那么我们将获得一些真正有用的行为。尝试将您的视图更改为此：
NavigationView { Text("Hello, World!") .navigationBarTitle("Primary")Text("Secondary") }

现在启动应用程序时，您看到的的内容取决于您的设备和方向：
  1. 在竖屏iPhone上，您会看到“Hello, World!”
  2. 在大尺寸横屏的iPhone（例如iPhone 11 Pro Max）上，您会看到“Secondary”。
  3. 在竖屏iPad上，您还将看到“Secondary”
  4. 在横屏iPad上，您会同时看到“Hello，World！”与“Secondary”并列。
在这些组合的第二个和第三个中，您会发现您可以从设备的左边缘滑动以调出另一个视图–“ Hello，World！”将在“ Secondary”的顶部部分滑动，并且可以通过在“ Secondary”视图中的任意位置轻按以将其关闭。具有这样的分割视图是利用iPad额外屏幕空间的好方法，同时也为用户提供了一种浏览内容的更快方法。
SwiftUI自动链接主视图和辅助视图，这意味着如果主视图中有NavigationLink，它将自动在辅助视图中加载其内容：
NavigationView { NavigationLink(destination: Text("New secondary")) { Text("Hello, World!") } .navigationBarTitle("Primary")Text("Secondary") }

但是，至少现在，所有这些魔术都有一些缺点，我希望可以在以后的SwiftUI更新中修复这些缺点：
  1. 初始的辅助视图顶部没有导航栏，因此即使您可以设置标题，也不会显示任何内容。
  2. 后续的详细视图无论是否需要总会得到一个导航栏，因此您需要使用navigationBarHidden(true)来隐藏它。
  3. 即使有足够的空间，也无法使主视图在iPad上保持可见。
  4. 无法在次视图的导航栏中显示“菜单”按钮，以使主视图更容易被发现。
  5. 默认情况下，您无法使主视图以横向显示； SwiftUI始终选择详细内容。
我有信心将来会解决这些问题的原因是因为它们都可以在带有UISplitViewController的UIKit中实现，因此希望在SwiftUI中启用相同功能只是时间问题。
提示：NavigationView支持一个或两个子视图。尽管您可以在其中放置更多内容，但第三个及后续视图将被忽略。
译自 Working with two side by side views in SwiftUI

    推荐阅读


    上一篇：原来你也曾经文艺过

    下一篇：亲子日记第132篇