目录主控界面控制变量的传递欢迎界面登录界面主界面带参数视图的预览应用导航结构大致是这样的欢迎界面一般是为了隐藏后台加载数据过程、登录界面、主界面这样的关系。我们已经知道了导航视图和选项卡视图但是欢迎界面和登录界面并不是适合这两种控制结构因为欢迎界面和登录界面使用过就能再回去了所以需要不同的方式来实现if else 替换视图。首先我们要做好几个视图WelcomeView、LoginView和主界面SwiftUIViewNavigation为了不影响当前关注点具体代码放在后面。主控界面然后我们来做主控界面import SwiftUI struct MainView: View { State private var isWelcome true State private var isLoggedIn false var body: some View { //NavigationView { if isWelcome { WelcomeView(isWelcome: $isWelcome) } else if isLoggedIn { SwiftUIViewNavigation(isLoggedIn:$isLoggedIn) } else { LoginView(isLoggedIn: $isLoggedIn) } //} } }主控界面逻辑很清楚根据两个变量来控制显示哪个界面最外层的NavigationView被我屏蔽了因为以为需要内嵌导航链接NavigationLink不能在没有NavigationView的情况下工作但是实际上没用到。我们的逻辑是初始状态进入欢迎界面欢迎界面有个按钮点一下修改变量值从而引发主控界面改变进入到登录界面登录后进入主界面。控制变量的传递State变量仅在视图内有效想在不同视图内共享变量需要使用Binding变量Binding变量需要作为参数在视图构造的时候传入。相当于c/c的extern。欢迎界面欢迎界面通常做成选项卡并且有个“立即体验”按钮。我个人非常不能理解“立即体验”的含义。示例代码struct WelcomeView: View { Binding var isWelcome: Bool //绑定变量需要外部传入 var body: some View { HStack { Spacer() VStack { Spacer() TabView{ Text(You are welcome) Text(You are welcome) Text(You are welcome) } .tabViewStyle(.page) .indexViewStyle(.page(backgroundDisplayMode: .always)) Button(action: { isWelcome false //修改绑定变量触发视图重绘 }) { Image(systemName: person) Text(跳过) } Spacer() } Spacer() } .border(.red) } }核心代码就两句代码里做了注释。效果点一下最下面的按钮就可以进入登录界面。登录界面登录界面要点完全一样传入变量修改变量触发进入主界面struct LoginView: View { Binding var isLoggedIn: Bool State var username: String var body: some View { HStack { Spacer() VStack { Spacer() VStack(alignment:.leading){ Text(You need login) TextField(username, text: $username) Button(action: { isLoggedIn true }) { Image(systemName: person) Text(Login) } }.padding() Spacer() } Spacer() } .border(.red) } }注意里面有个TextField可以输入内容可以用来观察页面跳转的时候视图的内容是否会被保留也就是视图对象是否被重新创建。主界面主界面也需要绑定参数因为一般会有一个注销按钮导致程序回到登录界面struct SwiftUIViewNavigation: View { Binding var isLoggedIn: Bool State var info: String info var body: some View { NavigationView { HStack { VStack(alignment: .leading, spacing: 20) { VStack(alignment: .leading, spacing: 20) { MenuItemView(imageName: person, itemName: 账号设置) { InputView() } MenuItemView( imageName: person, itemName: 嵌套SwiftUIViewTab ) { SwiftUIViewTab() } MenuItemView( imageName: person, itemName: 嵌套SwiftUIViewNavigation ) { SwiftUIViewNavigation(isLoggedIn:$isLoggedIn) } Spacer() Button(action: { isLoggedIn false }) { Image(systemName: person) Text(logout) } } //.navigationBarTitle(导航, displayMode: .large) //.navigationBarItems(leading: titleLineViewLeft,trailing: titleLineViewWright) HStack { Text(info).padding(10) Spacer() }.background(.cyan) } .padding(.all, 20) Spacer() }.border(.red) } } struct MenuItemViewdestinationView: View: View { var imageName: String var itemName: String ViewBuilder public var destinationview: () - destinationView var body: some View { NavigationLink(destination: destinationview) { HStack(spacing: 20) { Image(systemName: imageName) Text(itemName) } } } } private var titleLineViewLeft: some View { HStack { Button(action: { info 返回 }) { Image(systemName: chevron.backward) } } } private var titleLineViewWright: some View { HStack { Button(action: { info 返回 }) { Image(systemName: chevron.backward) } Button(action: { info 搜索 }) { Image(systemName: magnifyingglass) } Button(action: { info 分享 }) { Image(systemName: square.and.arrow.up) } } } } #Preview { var isLoggedIn : Bool true SwiftUIViewNavigation(isLoggedIn:Binding.constant(isLoggedIn)) }注意主界面有个注销按钮点一下会导致回到登录界面。在登录界面输入信息在主界面退出登录回到登录界面发现输入的信息没有了说明视图切换后原来的视图对象就不存在了程序必须自己保存和恢复数据。带参数视图的预览前面主界面的预览代码和原始代码不同增加了参数传递。预览和运行的机制并不相同绑定变量是个常量修改是无效的当然这里也不影响我们的功能。代码就是个套路#Preview { var isLoggedIn : Bool true SwiftUIViewNavigation(isLoggedIn:Binding.constant(isLoggedIn)) }