【问题标题】:What's the equivalent of the UISplitViewController in SwiftUISwiftUI 中的 UISplitViewController 等价物是什么
【发布时间】:2019-08-07 15:43:15
【问题描述】:

我需要实现一个接近 iPad 和 iPhone 中默认邮件应用程序的 UI。

App 有两个部分,一般情况下,主视图将显示在左侧,详细视图将显示在 iPad 的右侧。

在手机中,主视图将显示在整个屏幕上,详细视图可以作为第二屏推送。

如何在新的 SwiftUI 中实现

【问题讨论】:

    标签: ios swift swiftui


    【解决方案1】:

    在 SwiftUI 中并没有真正的 SplitView,但是你描述的会在你使用下面的代码时自动完成:

    import SwiftUI
    
    struct MyView: View {
        var body: some View {
            NavigationView {
                // The first View inside the NavigationView is the Master
                List(1 ... 5, id: \.self) { x in
                    NavigationLink(destination: SecondView(detail: x)) {
                        Text("Master\nYou can display a list for example")
                    }
                }
                .navigationBarTitle("Master")
                // The second View is the Detail
                Text("Detail placeholder\nHere you could display something when nothing from the list is selected")
                    .navigationBarTitle("Detail")
            }
        }
    }
    
    struct SecondView: View {
        var detail: Int
        var body: some View {
            Text("Now you are seeing the real detail View! This is detail \(detail)")
        }
    }
    

    这也是为什么.navigationBarTitle() 修饰符应该应用于导航视图内部的视图,而不是导航视图本身。

    奖励:如果您喜欢 splitView navigationViewStyle,您可以在 NavigationView 上应用 .navigationViewStyle(StackNavigationViewStyle()) 修饰符。

    编辑:我发现 NavigationLink 有一个 isDetailLink(Bool) 修饰符。默认值似乎是true,因为默认情况下“目标”显示在详细视图(右侧)中。但是,当您将此修饰符设置为 false 时,目标将显示为主节点(在左侧)。

    【讨论】:

    • 我没有找到 isDetailLink(() 修饰符,因此解决了我遇到的类似问题。谢谢!!
    • isDetailLink() 在 iPad iOS 13.1 上存在问题。一旦您开始与之交互,该视图就会消失。
    • 如何使主列在纵向模式下始终可见。从左侧滑动以查看它并不理想,因为它不直观。 DoubleColumnNavigationViewStyle 似乎不适用于 XCode 版本 11.2 beta 2,也不适用于 Xcode 版本 11.1 ??‍♂️
    • @SimonBachmann 是的,从左侧滑动并不直观,我同意你的观点!我还没有找到解决方案,但是当我找到一些东西时,我会告诉你的!
    • 是的,那太好了!我认为他们会在未来的更新中解决这个问题。这似乎是一个错误。我还希望他们添加将 DoubleColumnNavigationViewStyle 动态更改为 StackNavigationViewStyle 的可能性,以便您可以导航到全屏到(Column1 -> Column2 -> FullScreenView)。这目前是不可能的。
    猜你喜欢
    • 1970-01-01
    • 2020-09-01
    • 1970-01-01
    • 2014-05-08
    • 2014-06-12
    • 1970-01-01
    • 2022-11-28
    • 2021-06-19
    • 2012-07-20
    相关资源
    最近更新 更多