SwiftUI直通车系列(3)—— 使用导航

Easter79
• 阅读 777

SwiftUI直通车系列三(3)—— 使用导航

    关于SwiftUI,我们前两篇博客介绍了独立组件的布局与属性设置相关内容,并且介绍了开发中最常用的列表视图的使用。但是一个完整的应用程序不可能是单界面的,如何使用SwiftUI进行界面间的导航跳转,是我们本博客讨论的重点。前两篇博客地址如下:

SwiftUI直通车系列(1)—— 视图的布局与组织

SwiftUI直通车系列(2)—— 列表视图

    在本系列的第二篇博客中,我们能够使用SwiftUI来构建列表视图,通常,列表视图用来展示目录页面,当用户点击列表中的某一项时,需要跳转到详情页。在iOS应用中,页面的跳转常用导航控制器进行管理。在SwiftUI中,创建一个导航也是非常简单的,只需要在组件最外层嵌套NavigationView即可。以我们之前的列表视图Demo为例,改写代码如下:

import SwiftUI
import UIKit

struct ContactModel {
    var name:String
    var phone:String
}

let modelData = [
    ContactModel(name:"王小丫", phone:"15137348888"),
    ContactModel(name:"李小二", phone:"15137348989")
]

struct ContentView: View {
    
    var body: some View {
        VStack (alignment: .leading, spacing: 10) {
            Text("Hello, SwiftUI!啊啊啊")
                .foregroundColor(Color.red)
                .underline()
                .font(Font.system(size: 25))
            Spacer()
            Text("Hello, SwiftUI!")
            .foregroundColor(Color.red)
            .underline()
            .font(Font.system(size: 25))
        }
        .padding(EdgeInsets(top: 30, leading: 0, bottom: 30, trailing: 0))
    }
}

struct Label:UIViewRepresentable {
    func makeUIView(context: Context) -> UILabel {
        UILabel(frame: .zero)
     }
    
    func updateUIView(_ uiView: UILabel, context: Context) {
        uiView.text = "Hello"
    }
}


struct ContentImage:View {
    var body: some View {
        Image("demo")
        .clipShape(Circle())
        .shadow(radius: 30)
    }
}

struct RowContent:View {
    
    var contactModel:ContactModel
    
    var body: some View {
        HStack(alignment:.top) {
            Image("demo").resizable().frame(width: 70, height: 70)
            VStack(alignment:.leading, spacing: 10) {
                Text(self.contactModel.name).bold().font(Font.system(size: 25))
                Text(self.contactModel.phone).font(Font.system(size: 20))
            }
            Spacer()
            }.padding(EdgeInsets(top: 10, leading: 20, bottom: 10, trailing: 20))
    }
}

struct ListContent:View {
    var body: some View {
        NavigationView {
            List(modelData, id: \.name) { model in
                RowContent(contactModel: model)
            }
            .navigationBarTitle("通讯录")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ListContent()
    }
}

你只需要关注ListContent结构体即可,其中为列表视图设置了导航,并且定义了导航栏上的标题,效果如下图:

SwiftUI直通车系列(3)—— 使用导航

要实现页面的跳转,需要为要触发跳转的组件添加NavigationLink包裹,NavigationLink可以指向要跳转的详情页面,如下:

struct ListContent:View {
    var body: some View {
        NavigationView {
            List(modelData, id: \.name) { model in
                NavigationLink(destination: ContentImage()) {
                    RowContent(contactModel: model)
                }
            }
            .navigationBarTitle("通讯录")
        }
    }
}

如果详情页面是动态的,在跳转时,我们也可以将数据传递过去,如下:

struct ContentImage:View {
    var name:String
    var phone:String
    var body: some View {
        VStack() {
            Image("demo")
                .clipShape(Circle())
                .shadow(radius: 30)
                .offset(x: 0, y: -70)
            Text(name).offset(x: 0, y: -50)
            Text(phone).offset(x: 0, y: -30)
        }
    }
}

struct ListContent:View {
    var body: some View {
        NavigationView {
            List(modelData, id: \.name) { model in
                NavigationLink(destination: ContentImage(name: model.name, phone: model.phone)) {
                    RowContent(contactModel: model)
                }
            }
            .navigationBarTitle("通讯录")
        }
    }
}

效果如下图所示:

SwiftUI直通车系列(3)—— 使用导航

默认导航的标题是大文字风格的,若要使用常规风格的,需要配置其displayMode属性,如下:

struct ListContent:View {
    var body: some View {
        NavigationView {
            List(modelData, id: \.name) { model in
                NavigationLink(destination: ContentImage(name: model.name, phone: model.phone)) {
                    RowContent(contactModel: model)
                }
            }
            .navigationBarTitle("通讯录", displayMode: .inline)
        }
    }
}

效果如下图所示:

SwiftUI直通车系列(3)—— 使用导航

专注技术,热爱生活,交流技术,也做朋友。

——珲少 QQ群:805263726

点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
swiftUi propertWrapper 自定义标记属性
上篇文章我们知道@Status 的作用了那么我们也可以自己定义类似的这种标签。。首先我们先来看下不使用属性标签,向导页面如何写////PropertyWrapperView.swift//learn_swiftUi////Createdbyliuanon2020/9/4.
Stella981 Stella981
3年前
React Navigation5.0系列四:Nesting navigators(嵌套导航)
此文章为ReactNavigation导航库5.0版本的第4篇,前几篇系列文章如下:ReactNavigation5.0系列一:StackNavigator的使用(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzA4O
Easter79 Easter79
3年前
SwiftUI直通车系列(4)—— 处理用户交互
SwiftUI直通车系列(4)——处理用户交互前情回顾:SwiftUI直通车系列(1)——视图的布局与组织(https://my.oschina.net/u/2340880/blog/4529951)SwiftUI直通车系列(2)——列表视图(https://my.oschina.n
Easter79 Easter79
3年前
SwiftUI直通车系列(1)—— 视图的布局与组织
SwiftUI直通车系列(1)——视图的布局与组织一、引言    SwiftUI提供了一种更快、更高效也更简单的页面开发方式。我们知道相对于ObjectiveC,Swift语言本身就更加高效简洁,SwiftUI采用了结构化的布局方式,使得应用的界面开发更加直观快速。本系列博客,
Easter79 Easter79
3年前
SwiftUI 官方教程(六)
6\.在列表和详情之间设置导航虽然列表已经能显示了,但是我们还不能通过点击单个地标来查看地标详情页面。SwiftUI教程把 list 嵌入一个 NavigationView 中,并把每个 row 嵌套在一个 NavigationButton 中来设置到目标view的转场,这样 list 就具
Easter79 Easter79
3年前
SwiftUI直通车系列(5)—— 自定义绘制
SwiftUI直通车系列(5)——自定义绘制前情回顾:SwiftUI直通车系列(1)——视图的布局与组织(https://my.oschina.net/u/2340880/blog/4529951)SwiftUI直通车系列(2)——列表视图(https://my.oschina.net
Easter79 Easter79
3年前
SwiftUI直通车系列(6)—— 使用动画
SwiftUI直通车系列(6)——使用动画   本系列博客是针对SwiftUI开发框架的快速入门介绍,之前系列博客地址:SwiftUI直通车系列(1)——视图的布局与组织(https://my.oschina.net/u/2340880/blog/4529951)SwiftUI直通车系列
可莉 可莉
3年前
016_swiftui_日期的使用
////ContentView.swift//learn_swiftUi////Createdbyliuanon2020/5/14.//Copyright©2020liuan.Allrightsreserved.//importSwi
可莉 可莉
3年前
015_swiftui_刘海屏适配
swiftUi创建的视图是默认在刘海屏幕的安全区域以内的。之前我们设置图片也用到了这个个属性。现在我们再来使用下吧.edgesIgnoringSafeArea(.all)下面就是图片了。 !(https://imgblog.csdnimg.cn/20200514174703741.png?xossprocess
Easter79 Easter79
3年前
SwiftUI直通车系列(2)—— 列表视图
SwiftUI直通车系列(2)——列表视图  列表视图的开发中非常常用的页面元素。SwiftUI中也有专门用来渲染列表的元素提供。一、编写行视图   列表实际上是一组行视图的组合,在布局列表视图之前,你首先需要定义好行视图的布局。例如,我们使用一个Image元素和两个Tex
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k