我需要实现一个与iPad和iPhone中默认Mail应用程序接近的UI。
该应用程序有两个部分,通常,主视图将显示在iPad的左侧,详细视图将显示在iPad的右侧。
在电话中,主视图将显示在整个屏幕上,详细信息视图可以作为第二个屏幕推送。
如何在新的SwiftUI中实现它
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,则可以.navigationViewStyle(StackNavigationViewStyle())
在NavigationView上应用修饰符。
编辑:我发现NavigationLink有一个isDetailLink(Bool)
修饰符。默认值显示为true
,因为默认情况下,“目标”显示在详细信息视图(右侧)中。但是,当您将此修饰符设置为时false
,目标将作为主节点显示(在左侧)。