Swift列表项滑动手势swipeActions

swipeActions 是 SwiftUI 在 iOS 15 和 macOS 12 中引入的一项功能，用于在列表项上实现滑动手势的操作按钮。当用户在列表中的某个项上滑动时，会显示一组操作按钮。这个功能类似于在 iOS 邮件应用中向左或向右滑动邮件时看到的按钮，例如“删除”、“标记为已读”等。

swipeActions 的基本用法

swipeActions 允许开发者为列表中的每一项定义不同的操作，通过设置滑动方向和按钮的样式，可以实现丰富的交互体验。

List {
    ForEach(items, id: \.self) { item in
        Text(item)
            .swipeActions(edge: .trailing) {
                Button(role: .destructive) {
                    delete(item)
                } label: {
                    Label("Delete", systemImage: "trash")
                }

                Button {
                    edit(item)
                } label: {
                    Label("Edit", systemImage: "pencil")
                }
                .tint(.blue)
            }
    }
}

.swipeActions(edge: .trailing)：设置了滑动动作在从右侧向左滑动时显示操作按钮。

Button(role: .destructive)：提供了一个带有红色背景的“删除”按钮，这是一个系统预定义的角色。

Button：提供了一个自定义的“编辑”按钮，带有蓝色背景。

swipeActions 的参数

edge: 指定滑动方向，可以是 .leading（从左侧滑动）或 .trailing（从右侧滑动）。默认是 .trailing。

allowsFullSwipe: 布尔值，用于指定是否允许完全滑动来自动触发第一个操作。默认是 true。

tint: 设置按钮的背景颜色。

role: 可以指定按钮的角色，比如 .destructive 角色用于表示“删除”等操作，系统会自动使用红色来标识。

修改允许的滑动手势

.swipeActions(edge: .leading, allowsFullSwipe: false)

上面的代码表示用户必须点击按钮才能执行操作，而不是滑动到尽头自动触发。

优点

简洁的代码：通过简单的几行代码，就可以在应用中实现滑动操作，不再需要复杂的手势和自定义视图。

一致的用户体验：使用 swipeActions 可以确保你的应用与系统应用的交互风格一致，让用户能够快速熟悉应用的操作方式。

自定义性强：可以为不同的列表项提供不同的操作按钮，并且支持不同颜色、图标等自定义设置。

swipeActions 提供了一种更灵活、更现代的方式来处理列表项的操作，在 iOS 应用开发中非常实用。

List的搭配使用

swipeActions必须通过List和ForEach搭配使用，如果仅使用ForEach将无法实现swipeActions的效果。

ForEach和List在搭配实现时，可能会出现因为List引入一些默认的样式，比如额外的边距。

因此，在使用的过程中可考虑调整List样式。

.listRowInsets(EdgeInsets()) // 移除默认的边距
.listRowSeparator(.hidden) // 去掉分隔线
.listStyle(PlainListStyle()) // 更改列表样式

示例代码

VStack {
    List{
        ForEach(exchangeRate.CommonCurrencies, id:\.self) { item in
            HStack {
                // 各列表项
            }
            .listRowInsets(EdgeInsets()) // 移除默认的边距
            .listRowSeparator(.hidden) // 去掉分隔线
            .swipeActions(edge: .leading) {
                Button {
                } label: {
                    Text("切换货币")
                }
                .tint(.blue)    // 按钮背景颜色为.blue
            }
        }
    }
    .listStyle(PlainListStyle()) // 更改列表样式
}