滑动操作#

在 Scripting 中，你可以为用作 <List> 列表行的视图（如 <HStack>）添加滑动操作按钮，支持如“删除”、“编辑”、“收藏”等常见交互。

为了更清晰地支持 TypeScript，Scripting 将 SwiftUI 的 swipeActions 拆分为两个方向明确的修饰符：

• leadingSwipeActions: 向右滑动（从左到右）
• trailingSwipeActions: 向左滑动（从右到左）

leadingSwipeActions#

为列表行的 左侧（leading） 添加滑动操作。

类型#

1leadingSwipeActions?: {
2  allowsFullSwipe?: boolean
3  actions: VirtualNode[]
4}

参数说明#

• actions: 滑动后显示的按钮组件数组（通常为 <Button>）。
• allowsFullSwipe: 是否允许“完全滑动”直接执行第一个按钮的操作。默认值为 true。

trailingSwipeActions#

为列表行的 右侧（trailing） 添加滑动操作。

类型#

1trailingSwipeActions?: {
2  allowsFullSwipe?: boolean
3  actions: VirtualNode[]
4}

参数说明#

• actions: 滑动后显示的按钮组件数组（通常为 <Button>）。
• allowsFullSwipe: 是否允许“完全滑动”直接执行第一个按钮的操作。默认值为 true。

示例用法#

1<List>
2  {list.map(item => 
3    <HStack
4      trailingSwipeActions={{
5        allowsFullSwipe: true,
6        actions: [
7          <Button
8            title="删除"
9            role="destructive"
10            action={() => deleteItem(item)}
11          />,
12          <Button
13            title="编辑"
14            tint="accentColor"
15            action={() => editItem(item)}
16          />
17        ]
18      }}
19    >
20      <Image systemName={item.icon} />
21      <Text>{item.title}</Text>
22    </HStack>
23  )}
24</List>

添加左滑操作（向右滑）示例：

1<HStack
2  leadingSwipeActions={{
3    actions: [
4      <Button
5        title="收藏"
6        tint="orange"
7        action={() => markAsFavorite(item)}
8      />
9    ]
10  }}
11>
12  <Text>{item.title}</Text>
13</HStack>

<Button> 属性说明#

每个滑动操作项都是一个 <Button>，你可以使用以下属性来自定义外观与行为：

• title: 按钮显示文本
• action: 点击按钮时执行的函数
• role（可选）: 设置为 "destructive" 会显示红色，适用于“删除”操作
• tint（可选）: 自定义按钮颜色，例如 "accentColor" 或系统颜色名

注意事项#

• leadingSwipeActions 和 trailingSwipeActions 可以在同一个行视图上同时使用。
• 仅用于列表行中的视图（例如 <List> 中的 <HStack>）才支持滑动操作。
• 当 allowsFullSwipe 为 false 时，用户必须点击按钮，而不能通过滑动全程触发操作。