ios SwiftUI中UISplitViewController的等效功能是什么

5w9g7ksd  于 2023-03-20  发布在  iOS
关注(0)|答案(2)|浏览(120)

我需要实现一个用户界面,接近默认的邮件应用程序在iPad和iPhone。
该应用程序有两个部分,通常情况下,主视图将显示在iPad的左侧,详细视图将显示在iPad的右侧。
在手机中,主视图将显示在整个屏幕上,详细视图可以作为第二屏幕推送。
如何在新的SwiftUI中实现

bnlyeluc

bnlyeluc1#

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()修饰符应该应用于NavigationView * 内部 * 的视图,而不是NavigationView本身。
额外的好处:如果你 * 不 * 喜欢splitView的导航视图样式,你可以在导航视图上应用.navigationViewStyle(StackNavigationViewStyle())修饰符。
编辑:我发现NavigationLink有一个isDetailLink(Bool)修饰符,默认值是true,因为默认情况下“目的地”显示在细节视图中(在右边),但是当您将这个修饰符设置为false时,目的地显示为主视图(在左边)。

tjvv9vkg

tjvv9vkg2#

在iOS 16+中,拆分视图可按如下方式创建:

@State private var employeeIds: Set<Employee.ID> = []

var body: some View {
    NavigationSplitView {
        List(model.employees, selection: $employeeIds) { employee in
            Text(employee.name)
        }
    } detail: {
        EmployeeDetails(for: employeeIds)
    }
}

您可以配置2列和3列布局。
文件:https://developer.apple.com/documentation/swiftui/navigationsplitview

相关问题