SwiftUI——如何使用新的NavigationStack和NavigationSplitView(如何页面跳转2.0以及如何制作侧栏)

从 iOS 16 开始,苹果开始弃用原先的NavigationView,以后会逐渐完全淘汰掉。现在开始使用NavigationStackNavigationSplitViewNavigationStack的效果和原本的NavigationView一样,而NavigationSplitView则和现在 iPadOS 上的NavigationView效果一样。
最近在 iPadOS 上面使用NavigationView,内容会放在侧栏,而不是像 iOS 或者以前一样。如下:请添加图片描述

苹果这次改名的目的应该是为了区别两种导航模式,怕开发者不好理解区分。
那么下面来介绍一下二者。

NavigationStack

NavigationStack的使用方法和NavigationView一模一样,只要改一下名字即可,更新代码很方便:

NavigationStack {
	NavigationLink...
}

唯一需要注意的是:只支持 iOS 16 及更新的系统。所以代码修改的时候应该改成以下格式,不然程序只能支持 iOS 16 及更新的代码了:

if #available(iOS 16.0, *) {
	//新版代码
	
} else {
	//兼容早期系统
	
}

顺道一提,NavigationStack等价于被遗弃的NavigationView的下面这种设置:

NavigationView {
    NavigationLink...
}
.navigationViewStyle(.stack)

NavigationSplitView

NavigationSplitView是新出来的,目的是方便开发者实现侧栏。事实上也真的很方便。

代码格式如下:

NavigationSplitView {
    //侧栏第一列
} content: {
    //侧栏第二列
} detail: {
    //页面
}

例如下面这段代码的样式如下:

NavigationSplitView {
	Text("1")
} content: {
	Text("2")
} detail: {
	Text("3")
}

横屏样式如下:
请添加图片描述
竖屏样式如下:
请添加图片描述
接下来通过下面的代码来讲一下新NavigationSplitView的数据流:

struct MainView: View {
    let colors: [Color] = [.purple, .pink, .orange]
    @State private var selection: Color? = nil // 默认没有选中的颜色
    var body: some View {
        NavigationSplitView {
                List(colors, id: \.self, selection: $selection) { color in
                    NavigationLink(color.description, value: color)
                }
            } detail: {
                if let color = selection {
                    Rectangle()
                        .foregroundColor(color)
                } else {
                    Text("Pick a color")
                }
            }
    }
}

此时显示效果如下:
请添加图片描述
下面点击“pink”看看:
请添加图片描述

希望能帮到有需要的人~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值