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

Easter79
• 阅读 304

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

点赞
收藏
评论区
推荐文章
Stella981 Stella981
1年前
Redis 列表(List)
Redis列表是简单的字符串列表,按照插入顺序排序。你可以添加一个元素导列表的头部(左边)或者尾部(右边)一个列表最多可以包含2321个元素(4294967295,每个列表超过40亿个元素)。实例redis127.0.0.1:6379LPUSHw3ckeyredis(integer)1
Easter79 Easter79
1年前
SwiftUI直通车系列(3)—— 使用导航
SwiftUI直通车系列三(3)——使用导航  关于SwiftUI,我们前两篇博客介绍了独立组件的布局与属性设置相关内容,并且介绍了开发中最常用的列表视图的使用。但是一个完整的应用程序不可能是单界面的,如何使用SwiftUI进行界面间的导航跳转,是我们本博客讨论的重点。前两篇博客地址如下:Swi
Stella981 Stella981
1年前
Redis的列表(List)类型
列表类型(List)可以存储一个有序的字符串列表,常用的操作就是向列表两端添加元素,或者获取列表中某一个片段。列表类型内部使用双向链表(doublelinkedlist)实现的,所以向列表两端添加或删除元素的速度非常快,越是接近两端的元素就越快,但是,也有弊端,就是通过索引访问元素的速度比较慢。因为使用了双向链表实现存储的,所以在命令上也有
Wesley13 Wesley13
1年前
mysql(视图 事务 索引 外键)
视图视图本质就是对查询的封装创建视图(定义视图 起名以v\_开头)createviewv\_studentsasselectclasses.nameas c\_name,students.\fromstudentsinnerjoinclassesonstudents.cls\_idclasses.id;查
Stella981 Stella981
1年前
Python容器
列表列表的元素可以修改的,通过直接赋值就能修改列表的元素。使用\\创建列表:weekdays\'monday','tuesday','wednesday','thursday','friday'\也可以使用list()创建空列表:weekdayslist()使用append()在列表尾部添加元素
Stella981 Stella981
1年前
C# ListView用法详解 很完整
一、ListView类         1、常用的基本属性:      (1)FullRowSelect:设置是否行选择模式。(默认为false)提示:只有在Details视图该属性才有意义。       (2)GridLines:设置行和列之间是否显示网格线。(默认为false)提示:只有在Details视图该属性才有意义。
Wesley13 Wesley13
1年前
IOS开发
在SwiftUI中显示模态视图简介这里教大家如何弹出一个简单的模态视图。分别有两个页面,ContentView和GCPresentedView,以下对应简称为A和B。我们要做的是在A视图中点击按钮跳转到B视图,然后再从B视图点击按钮返回到A视图。步骤在A视图中创建按钮和模态视图代码
可莉 可莉
1年前
015_swiftui_刘海屏适配
swiftUi创建的视图是默认在刘海屏幕的安全区域以内的。之前我们设置图片也用到了这个个属性。现在我们再来使用下吧.edgesIgnoringSafeArea(.all)下面就是图片了。 !(https://imgblog.csdnimg.cn/20200514174703741.png?xossprocess
Stella981 Stella981
1年前
Django 基于类的视图源码分析 三
列表类通用视图(list.py)此文件包含用于显示数据列表常用的类和工具类。不仅可以方便的用于显示基于模型(Model)的数据列表,也可以用于显示自定义数据列表。!list.py类图(http://static.oschina.net/uploads/space/2013/0219/161042_iKka_233
Stella981 Stella981
1年前
IM多类型holder封装
如标题,这是一个在列表多类型视图时的一个简化封装方法,减少多余代码,提高复用性,更好迭代扩展,先看视图列表效果图GitHub:https://github.com/1024477951/FragmentApp(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2F
helloworld_34035044 helloworld_34035044
1个月前
皕杰报表小结
1.在使用皕杰报表时,我们会发现皕杰报表总共有下列五个视图区我们可以关闭或打开每个视图区,方便我们的报表设计。有的时候我们关闭了某个视图的话,我们可以通过点击左上角的视图菜单来重新打开我们所需要用的视图区域。这时候我们点击每个视图的左上角就会发现有分离按钮