SwiftUI—如何使用NavigationLink进行页面间的跳转

简介: SwiftUI—如何使用NavigationLink进行页面间的跳转

本节课演示如何使用NavigationLink,进行页面之间的跳转。


示例代码:


struct ContentView : View {
    @State var isPresented = false
    var body: some View {
//            NavigationView { //SwiftUI的页面之间的跳转,是在NavigationView里进行的
//                HStack{
//                    NavigationLink(destination: Text("Detail Page #1") ) { //添加一个NavigationLink导航链接,导航链接是一个按钮,当点击该按钮时,触发导航跳转到destination指定的文本视图
//                        Text("Go detail Page #1 >") //作为导航按钮的标题
//                    }
//                    .navigationBarTitle("Index Page #1")
//                    .accentColor(Color.orange) //导航链接上的文字颜色
//                }
//            }
            NavigationView {
                HStack{
                    NavigationLink(destination: MyDetailView(message: "Detail Page #2") ) {
                        Text("Go detail Page #2 >")
                    }
                    .navigationBarTitle("Index Page #1")
                }
            }
    }
}
struct MyDetailView: View {
    let message: String
    var body: some View {
        VStack {
            Text(message)
                .font(.largeTitle)
        }
    }
}


2466108-cab27e5e34f21254.webp.jpg


目录
相关文章
|
4月前
|
Web App开发 小程序 Android开发
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
79 0
|
5月前
uniapp的两个跳转方式
uniapp的两个跳转方式
|
5月前
|
开发框架 移动开发 Android开发
uniapp的几种跳转方式
uniapp的几种跳转方式
|
4月前
|
小程序
微信小程序实现不同按钮跳转同一个页面显示不同内容
微信小程序实现不同按钮跳转同一个页面显示不同内容
73 0
|
2月前
|
小程序 API
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
【微信小程序】-- 页面导航 -- 声明式导航(二十二)
|
2月前
|
小程序
【微信小程序】-- 全局配置 -- window - 导航栏(十五)
【微信小程序】-- 全局配置 -- window - 导航栏(十五)
|
9月前
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-通过声明式导航跳转到用户详情页
前端学习笔记202305学习笔记第二十一天-vue3.0-通过声明式导航跳转到用户详情页
56 0
|
6月前
|
开发框架 移动开发 JavaScript
uniapp跳转方式
uniapp跳转方式
51 0
|
7月前
|
Web App开发 前端开发 JavaScript
如何使 SAP UI5 SmartField 在运行时渲染成超链接的形式并支持跳转的试读版
如何使 SAP UI5 SmartField 在运行时渲染成超链接的形式并支持跳转的试读版
27 0