免费诶网站建设,国外短视频软件,如何建设好一个公司网站,wordpress修改端口SwiftUI中的List可是个好东西#xff0c;它用于显示可滚动列表的视图容器#xff0c;类似于UITableView。在List中可以显示静态或动态的数据#xff0c;并支持垂直滚动。List是一个数据驱动的视图#xff0c;当数据发生变化时#xff0c;列表会自动更新。针对List#xf…
SwiftUI中的List可是个好东西它用于显示可滚动列表的视图容器类似于UITableView。在List中可以显示静态或动态的数据并支持垂直滚动。List是一个数据驱动的视图当数据发生变化时列表会自动更新。针对List我们还可以进行添加、移动、删除以及滑动等功能。示例代码
//
// RouterView.swift
// SwiftBook
//
// Created by song on 2024/7/4.
//import SwiftUIstruct RouterView: View {State var monthes [January,February,March,April,May,June,July,August,September,October,November,December]var body: some View {List(monthes, id: \.self) { m inText(m)}}
}#Preview {RouterView()
}显示静态数据
显示静态的数据还是比较简单的比如要显示12个月份代码中直接在List组件里面放置Text组件即可不过如果同类型数据过多还是采用动态数组的方式去显示。 显示动态数据
很多的时候采用的都是动态数组显示的方式比如通过网络请求回来的数据再通过List显示出来等等 上面的代码简化了很多我们将months数据作为第一个参数传给了List而List的第二个参数id则表示months数据中的元素采用自身作为唯一的标识符。如果数组中的两个或多个元素不是唯一的这可能会导致问题。
如果不用字符串数据而是该用了实例对象数组则可以将实例对象的结构实现Identifiable协议该协议需要实现一个id属性如果将一个实现了Identifiable协议的实例对象数组传给List则不需要指定id参数了。比如下面的代码示例 样式设置
默认的List是有背景色Light模式下是白色Dark模式下是灰色比如下面这个代码 背景色
只需要添加一行代码即可将其修饰在List闭包内部的组件上即修饰在Text组件上。如果直接修饰在List组件上则没有任何效果。 内间距
另外上面的代码中Text的宽度没有完全和cell的宽度对齐两边还有一些间距有的时候是不需要这个间距的设置下面代码即可同样是要修饰在List闭包内的组件上 分割线颜色与隐藏
设置分割线以及是否显示需要将下面两个修饰符作用在List闭包内的组件上。
// 隐藏分割线默认是显示的。
.listRowSeparator(.hidden)
// 设置分割线颜色。
.listRowSeparatorTint(.red)设置Cell之间的间距
默认cell之间是采用分割线进行区分的如果设置间距则分割线直接就隐藏了。该修饰符需要作用在List组件上效果如下图设置了10个间距 List样式
设置List样式可以通过在括号内需要传入对应的style参数。listStyle修饰符需要作用在List组件上。
automatic默认列表样式根据设备和环境自动选择合适的列表样式。 plain普通列表样式。 grouped分组列表样式。 insetGrouped缩进分组列表样式。 sidebar侧边栏列表样式。 inset缩进列表样式。 以上样式的效果图如下有些样式不太明显结合其他的修饰符效果可能更好。 分组显示Section、 Header、 Footer
List组件要想实现分组的功能很简单在List组件中使用Section组件即可。Section组件支持Header和Footer功能同时Header和Footer也支持直接设置Title和自定义。
比如下面直接设置Section title的示例直接给Title一个字符串在content闭包内通过ForEach循环添加要显示的组件当然也可以不用循环而是静态数据。 下面是自定义Header和Footer的示例Header中横向显示了Image和Text组件Footer中添加了一个Text效果如下 这里额外说一下List和ForEach循环的结合使用的场景
如果只是单纯的显示一些静态数据或者一个数据数据只用List组件即可。 如果要显示数组数据可以单独使用List组件将数组数据传给List也可以在List组件中添加ForEach组件通过ForEach循环遍历数组数据。 var body: some View {List {ForEach(fruits, id: \.self) { fruit inText(fruit.capitalized)}}}如果即有静态数据又有动态数据要显示则需List和ForEach组合使用 上面的代码稍微有些多主要为了视觉效果更好一些。从效果图中可以看出是人为设置了两个Header采用了Text组件并设置了相关的属性修饰符。代码中不难看出List组件里面采用了ForEach同时也单独设置了Text组件。 另外需要提一下我们给ForEach设置了前景颜色这个前景颜色会作用在ForEach中的每个Text上。还有给Group组件设置了List cell的样式那么这个样式也会作用在List中的每个子组件上这样做代码会更加简洁明了。
添加和删除元素 只能在List的动态部分添加和删除元素而静态元素不能在应用程序运行时添加或删除。因此我们的列表需要完全动态或者至少包含一个动态部分以便我们能够添加或删除元素。
为了有添加和删除的入口我们添加了导航栏并设置了导航栏的toolbar导航栏的设置这里不过多阐述。
添加元素 在导航栏的右侧添加了一个添加元素的按钮点击后在List要展示的数据中添加元素此时也要求该数据必须被State包裹修饰以便其修改后触发UI刷新。具体代码见下面效果图。
删除元素 在导航栏左侧添加了一个EditButton点击后将整个List设置为编辑模式并在每个cell的左侧提供一个红色的删除按钮。这个过程主要是由系统自动的。不过前提是要对List添加至少一个可操作的方法比如onDeleteonMove等否则点击了EditButtonList也没有任何变化。 另外对单个cell进行左滑操作也可以删除元素。
为了实现删除效果需要在ForEach上添加onDelete方法如下
.onDelete(perform: { indexSet in})这个onDelete方法返回一个IndexSet类型的值我们可以在这个闭包内进行数据删除不过为了UI逻辑和业务逻辑低耦合采用单独抽出来一个方法处理删除逻辑如下
func deleteItem(indexSet: IndexSet) {fruits.remove(atOffsets: indexSet)
}在deleteItem方法里面fruits数组调用remove(atOffsets:)方法即可。
因为onDelete方法返回一个IndexSet类型的值所以抽出来的方法同样接受这样类型的值。最终只要在ForEach上调用下面代码即可不用额外写传递的参数
ForEach(fruits, id: \.self) { fruit inText(fruit.capitalized)
}
.onDelete(perform: deleteItem)最终代码及效果如下图 移动功能
移动功能还是比较普遍的基于上面的代码只需要在ForEach上添加下面的方法即可。
.onMove(perform: { indices, newOffset in})这个方法返回两个参数第一个为IndexSet类型的值第二个为Int类型的值。同onDelete一样我们单独抽出来一个方法同样接收这两个参数。
func moveItem(indexSet: IndexSet, offSet: Int) {fruits.move(fromOffsets: indexSet, toOffset: offSet)
}在moveItem方法中fruits数据调用move(fromOffsets:, toOffset:)方法即可。最后在ForEach上添加该方法
ForEach(fruits, id: \.self) { fruit inText(fruit.capitalized)
}
.onMove(perform: moveItem)实现了上面的代码后我们可以在List的编辑模式下拖动cell移动编辑模式下每个cell右侧有三个横杠的图标拖动即可移动。另外非编辑模式下长按cell后也可以进行拖动代码及效果图如下 自定义左滑功能
SwiftUI的swipeActions()修饰符允许你添加一个或多个滑动动作按钮到你的列表行可选地控制他们属于哪一边以及他们是否应该被触发使用一个完整的滑动。 先看下代码及效果图 swipeActions()方法有三个参数第一个edge决定操作按钮放哪边第二个allowsFullSwipe决定完全滑动是否自动执行第一个操作默认值为true第三个即是内容闭包了。
关于样式只能通过tint设置背景色如果不设置系统默认是灰色的。 SwiftUI底层还是很聪明的比如第一个Button我们用Text显示内容只有文字那么系统就显示了Add文字第二个和第三个用Label显示有文字和图片但是系统聪明的只显示了图片。
对于想要拥有删除功能的按钮应该使用Button(role: .destructive)而不是仅仅指定一个红色背景色比如上面第三个按钮不需要有任何删除的逻辑聪明的底层帮我们实现了。
Button(role: .destructive) {} label: {Label(Delete, systemImage: trash.fill)
}SwiftUI中的List确实是一个非常好用的组件包含的功能也比较多大多数的App界面也都是由导航栏和List组成的。
