SwiftUI列表List
SwiftUI列表List

SwiftUI列表List

SwiftUI 的 List 是专为展示结构化、可滚动的行式内容设计的。它等价于 iOS 的 UITableView 或 macOS 的 NSTableView,但使用上更为声明式。

基本用法

struct ListView: View {
    let fruits = ["🍎 Apple", "🍌 Banana", "🍇 Grape"]

    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
        }
    }
}

主要用途

1、数据集合展示:新闻列表、联系人、文件列表。

2、项目选择界面:侧边导航、菜单选项、任务清单。

3、增删改操作支持:删除条目、排序、滑动菜单。

4、搭配导航使用:NavigationLink 跳转到详情页。

主要功能

1、支持ForEach,可动态更新视图和数据。

2、支持 .onDelete(),实现滑动删除等操作。

3、支持 .onMove() 拖动排序。

4、支持 ,swipeActions 行滑动菜单,macOS 13+/iOS 15+版本。

5、支持NavigationLink,可用作导航菜单。

6、支持多选,需要添加 .selection(…)。

7、支持Section {},可多组内容展示。

使用场景

1、静态列表

List {
    Text("设置")
    Text("关于")
}

2、动态列表

List(items, id: \.id) { item in
    Text(item.name)
}

3、分组列表(Section)

List {
    Section(header: Text("水果")) {
        Text("🍎 Apple")
        Text("🍊 Orange")
    }
    
    Section(header: Text("蔬菜")) {
        Text("🥕 Carrot")
        Text("🥬 Lettuce")
    }
}

4、列表实现导航链接功能

List(items) { item in
    NavigationLink(destination: DetailView(item: item)) {
        Text(item.title)
    }
}

5、提供删除功能的列表

struct FruitListView: View {
    @State private var fruits = ["Apple", "Banana", "Grape"]

    var body: some View {
        List {
            ForEach(fruits, id: \.self) { fruit in
                Text(fruit)
            }
            .onDelete { indices in
                fruits.remove(atOffsets: indices)
            }
        }
    }
}

List修饰符

SwiftUI中,对List添加 .cornerRadius 和 .clipped() 等修饰符不起作用,因为这些修饰符只会影响外围的容器区域,不会影响List的行或Section背景。

因此,需要使用List修饰符,控制List行或Section背景等属性。

1、listRowBackground():设置当前行(或者 Section 的每一行)的背景视图。

改变行背景颜色:

.listRowBackground(Color.white)

给行加圆角、阴影:

.listRowBackground(
    RoundedRectangle(cornerRadius: 10)
        .fill(Color.white)
        .shadow(radius: 2)
)

背景视图只影响“行本身”,不会改变List的整体背景。

2、listRowInsets():控制行的内边距(内容距离行边界的距离)。

默认情况下,List 会给行留一层系统内边距(左右大约 16~20pt),如果你想需要去掉或自定义:

.listRowInsets(EdgeInsets(top: 8, leading: 0, bottom: 8, trailing: 0))

完全去掉内边距:

.listRowInsets(EdgeInsets())

3、listSectionSeparator():控制行或Section的分割线是否显示。

.listSectionSeparator(.hidden)

4、listSectionSeparatorTint(_:):修改分隔线颜色。

5、listRowSeparator():控制单行的分隔线显示/隐藏。

6、 listSectionHeader() / listSectionFooter():为 Section 添加自定义头部和尾部视图。

注意事项

List无法和ScrollView搭配使用,否则列表内容会消失。如果使用ScrollView,可以配合ForEach循环实现列表内容,如果内容比较多,可以配合LazyVStack进行懒加载。

ScrollView(showsIndicators: false) {
    LazyVStack(spacing: 10) {
        ForEach(groupedRecords, id:\.date) { group in

如果不使用List,搭配的Section会失去分组样式,转变为普通的文本。

总结

List用于展示数据集合、导航跳转、滑动删除/拖动排序等功能。

List样式需要使用 .listStyle 修饰符控制。

相关文章

1、SwiftUI List和Form的分组视图Section:https://fangjunyu.com/2025/01/13/swiftui-list%e5%92%8cform%e7%9a%84%e5%88%86%e7%bb%84%e8%a7%86%e5%9b%besection/

2、SwiftUI在List底部显示注释或说明:https://fangjunyu.com/2025/01/13/swiftui%e5%9c%a8list%e5%ba%95%e9%83%a8%e6%98%be%e7%a4%ba%e6%b3%a8%e9%87%8a%e6%88%96%e8%af%b4%e6%98%8e/

3、SwiftUI使用List样式增加间距:https://fangjunyu.com/2025/01/13/swiftui%e4%bd%bf%e7%94%a8list%e6%a0%b7%e5%bc%8f%e5%a2%9e%e5%8a%a0%e9%97%b4%e8%b7%9d/

4、SwiftUI列表格式化ListFormatStyle:https://fangjunyu.com/2024/12/24/swiftui%e5%88%97%e8%a1%a8%e6%a0%bc%e5%bc%8f%e5%8c%96listformatstyle/

5、SwiftUI LazyVGrid与List布局冲突问题:https://fangjunyu.com/2024/12/07/swiftui-lazyvgrid%e4%b8%8elist%e5%b8%83%e5%b1%80%e5%86%b2%e7%aa%81%e9%97%ae%e9%a2%98/

6、SwiftUI listStyle修饰符:https://fangjunyu.com/2025/11/03/swiftui-liststyle%e4%bf%ae%e9%a5%b0%e7%ac%a6/

   

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开发者。

欢迎加入我们的 微信交流群QQ交流群,交流更多精彩内容!
微信交流群二维码 QQ交流群二维码

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注