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

Easter79
• 阅读 413

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

    列表视图的开发中非常常用的页面元素。SwiftUI中也有专门用来渲染列表的元素提供。

一、编写行视图

      列表实际上是一组行视图的组合,在布局列表视图之前,你首先需要定义好行视图的布局。例如,我们使用一个Image元素和两个Text元素来布局一个简单的联系人行视图。

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

在预览界面上与布局情况进行预览,如下图:

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

二、关联数据

     列表中展示的数据往往是一组相似类型的数据。以上联系人行视图为例,我们可以定义一组联系人数据来填充到列表的行视图中。首先定义一个结构体用来描述联系人信息,如下:

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

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

如上代码所示,其中ContactModel定义了联系人的基本信息,modelData是一组联系人模型,实际应用中,modelData的数据来源可能是网络,也可能是本地文件。修改RowContent代码如下:

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))
    }
}

SwiftUI的实时预览功能也支持对一组组件进行预览,示例如下:

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            RowContent(contactModel: modelData[0])
            RowContent(contactModel: modelData[1])
        }.previewLayout(.fixed(width: 400, height: 80))
    }
}

效果如下图所示:

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

三、使用列表组件

     SwiftUI中使用List组件来构建列表,将布局好的列表行视图嵌入其中即可展示出列表界面,如下:

struct ListContent:View {
    var body: some View {
        List {
           RowContent(contactModel: modelData[0])
           RowContent(contactModel: modelData[1])
        }
    }
}

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

此时,预览效果如下图所示:

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

在实际开发中,一般我会采用动态的方式来构建列表,通过对数据源的便利,可以循环生成列表行,示例如下:

struct ListContent:View {
    var body: some View {
        List(modelData, id: \.name) { model in
           RowContent(contactModel: model)
        }
    }
}

其中id是一个行标识字段,使用数据源中能够保证唯一的字段来设置即可。

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

——珲少 QQ群:805263726

点赞
收藏
评论区
推荐文章
Easter79 Easter79
2年前
SwiftUI直通车系列(3)—— 使用导航
SwiftUI直通车系列三(3)——使用导航  关于SwiftUI,我们前两篇博客介绍了独立组件的布局与属性设置相关内容,并且介绍了开发中最常用的列表视图的使用。但是一个完整的应用程序不可能是单界面的,如何使用SwiftUI进行界面间的导航跳转,是我们本博客讨论的重点。前两篇博客地址如下:Swi
Easter79 Easter79
2年前
SwiftUI直通车系列(4)—— 处理用户交互
SwiftUI直通车系列(4)——处理用户交互前情回顾:SwiftUI直通车系列(1)——视图的布局与组织(https://my.oschina.net/u/2340880/blog/4529951)SwiftUI直通车系列(2)——列表视图(https://my.oschina.n
Easter79 Easter79
2年前
SwiftUI直通车系列(1)—— 视图的布局与组织
SwiftUI直通车系列(1)——视图的布局与组织一、引言    SwiftUI提供了一种更快、更高效也更简单的页面开发方式。我们知道相对于ObjectiveC,Swift语言本身就更加高效简洁,SwiftUI采用了结构化的布局方式,使得应用的界面开发更加直观快速。本系列博客,
Easter79 Easter79
2年前
SwiftUI直通车系列(5)—— 自定义绘制
SwiftUI直通车系列(5)——自定义绘制前情回顾:SwiftUI直通车系列(1)——视图的布局与组织(https://my.oschina.net/u/2340880/blog/4529951)SwiftUI直通车系列(2)——列表视图(https://my.oschina.net
Easter79 Easter79
2年前
SwiftUI Tips 004:奇妙而强大的修饰符 (modifier)
在SwiftUI中,修饰符的功能类似于CSS,用来在应用布局中定位和配置视图,如修改视图的大小、背景、添加动画、添加手势等等。View协议通过扩展提供了大量的修饰符,它们以协议方法的形式给出,同时提供了默认实现。以我们熟悉的 frame() 为例,来看看它的声明:@available(iOS13.0,OSX10.15,
Wesley13 Wesley13
2年前
IOS开发
在SwiftUI中显示模态视图简介这里教大家如何弹出一个简单的模态视图。分别有两个页面,ContentView和GCPresentedView,以下对应简称为A和B。我们要做的是在A视图中点击按钮跳转到B视图,然后再从B视图点击按钮返回到A视图。步骤在A视图中创建按钮和模态视图代码
Easter79 Easter79
2年前
SwiftUI直通车系列(6)—— 使用动画
SwiftUI直通车系列(6)——使用动画   本系列博客是针对SwiftUI开发框架的快速入门介绍,之前系列博客地址:SwiftUI直通车系列(1)——视图的布局与组织(https://my.oschina.net/u/2340880/blog/4529951)SwiftUI直通车系列
Stella981 Stella981
2年前
Django 基于类的视图源码分析 三
列表类通用视图(list.py)此文件包含用于显示数据列表常用的类和工具类。不仅可以方便的用于显示基于模型(Model)的数据列表,也可以用于显示自定义数据列表。!list.py类图(http://static.oschina.net/uploads/space/2013/0219/161042_iKka_233
Stella981 Stella981
2年前
IM多类型holder封装
如标题,这是一个在列表多类型视图时的一个简化封装方法,减少多余代码,提高复用性,更好迭代扩展,先看视图列表效果图GitHub:https://github.com/1024477951/FragmentApp(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2F
Easter79 Easter79
2年前
SwiftUI 跨组件数据传递
作者:Cyandev,iOS和MacOS开发者,目前就职于字节跳动0x00前言众所周知,SwiftUI的开发模式与React、Flutter非常相似,即都是声明式UI,由数据驱动(产生)视图,视图也会与数据自动保持同步,框架层会帮你处理“绑定”的问题。在声明式UI中不存在命令式地让一个视图变成xxx
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k