专栏首页韦弦的偶尔分享SwiftUI 布局:使用两个并排视图

SwiftUI 布局:使用两个并排视图

UISplitViewController是UIKit中最重要的UI组件之一,您会在许多Apple应用程序中看到它,例如 Notes,Mail 等。在iPad上,拆分视图并排显示两个视图,通常在左侧有一个主列表,在右侧有一个详细视图。在iPhone上,拆分视图会自动将两个视图折叠为一个视图,因此您会获得导航视图的 push 和 pop 行为。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 干货 | 关于SwiftUI,看这一篇就够了

    梁启健,携程金融支付中心开发工程师,主要负责支付iOS端的开发与优化工作,喜欢研究大前端和跨平台技术。

    携程技术
  • 苹果全新UI框架来了!可视化编程,自动化减少20%代码量

    SwiftUI是一个非常方便快速的构建UI的框架,与最新Xcode设计工具无缝协作,可为所有苹果设备构建UI。开发者通过SwiftUI,利用Swift语法就能够...

    CDA数据分析师
  • Hacking with iOS: SwiftUI Edition 里程碑(一)之 What you learned?

    你现在已经完成了前两个SwiftUI项目,并且也完成了一个技术项目——两个应用程序和一个技术项目的节奏将持续到课程结束,这将帮助你快速提升知识,同时花时间回顾和...

    韦弦zhy
  • Hacking with iOS: SwiftUI Edition - SnowSeeker 项目(二)

    SwiftUI为我们提供了两个环境值来监视应用程序的当前size class,这实际上意味着在空间有限时可以显示一种布局,在空间足够时可以显示另一种布局。

    韦弦zhy
  • SwiftUI 中布局的工作原理

    所有的 SwiftUI 布局都有三个简单的步骤,理解这些步骤是每次获得优秀布局的关键。步骤如下:

    韦弦zhy
  • 百行代码变十行,苹果SwiftUI可视化编程让开发者惊呼完美

    Swift 是苹果于 2014 年发布的全新开发语言,可与 Objective-C* 共同运行于 macOS 和 iOS 平台,用于搭建基于苹果平台的应用程序。...

    机器之心
  • WWDC - SwiftUI - 初恋般的感觉

    要在Xcode中预览画布上的视图并与之交互,请确保您的Mac运行的是macOS 10.15 beta版。

    iOSSir
  • 100 Days of SwiftUI —— Day 92:布局(二)

    今天,我们将继续进行关于视图布局的技术项目,探索我们可以使用的最强大的布局视图之一:GeometryReader。这使我们可以在运行时读取视图的大小和位置,并随...

    韦弦zhy
  • 在SwiftUI视图中包装UIViewController

    SwiftUI是构建应用程序的绝佳框架,但目前还远远不够完善——它有很多事情做不到,因此,如果您想添加更多高级功能,则需要学习与UIKit交流。有时,这是为了整...

    韦弦zhy

扫码关注云+社区

领取腾讯云代金券