[SwiftUI] Swipe を検知する .swipeActions の使い方

⌛️ 2 min.

iOS15/macOS12 からサポートされる .swipeActions について説明します。

Sponsor Link

環境＆対象

以下の環境で動作確認を行なっています。

macOS Monterey beta 12
Xcode 13 beta5
iOS 15

iOS14/macOS11 でのスワイプサポート

iOS14/macOS11 以前では、スワイプ操作は直接にはサポートされていませんでした。

以下の記事は、DragGesture を使ったスワイプ検知です。
[SwiftUI] Swipeの検知と実装

.swipeActions

iOS15/macOS12 からサポートされる View Modifier です。

スワイプ動作を検知して、対応した操作を定義できます。

Apple のドキュメントは、こちら。

注意

スワイプを検知して動作するためには、以下が条件となっています。

List 内の要素である
.swipeActions の content として、Button が使用されている（複数可）

iOS での例

以下は、iOS15 で動作を確認したコードです。


//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2021/10/14
//  © 2021  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            // (1)
            Text("Hello, world!")
                .swipeActions(edge: .leading, allowsFullSwipe: false, content: {
                    Button(action: {print("Button")}, label: { Image(systemName: "1.square")})
                })
            // (2)
            Text("Hello, world!")
                .swipeActions(edge: .leading, allowsFullSwipe: false, content: {
                    Button(role: .destructive, action: {print("Button")}, label: { Image(systemName: "1.square")})
                    Button(role: .cancel,      action: {print("Button")}, label: { Image(systemName: "2.square")})
                    Button(role: .none,        action: {print("Button")}, label: { Image(systemName: "3.square")})
                    Button(                    action: {print("Button")}, label: { Image(systemName: "4.square")})
                })
            // (3)
            Text("Hello, world!")
                .swipeActions(edge: .leading, allowsFullSwipe: false, content: {
                    Button(action: {print("Button")}, label: { Image(systemName: "1.square")}).tint(.red)
                    Button(action: {print("Button")}, label: { Image(systemName: "2.square")}).tint(.yellow)
                    Button(action: {print("Button")}, label: { Image(systemName: "3.square")}).tint(.blue)
                    Button(action: {print("Button")}, label: { Image(systemName: "4.square")})
                })
            // (4)
            Text("Swipe does not work")
                .swipeActions(edge: .leading, allowsFullSwipe: false, content: {
                    Text("Memo1").tint(.red)
                    Text("Memo2").tint(.yellow)
                })
        }
        .padding()
     }
}

コード解説

.swipeActions の edge でどちらのエッジからのスワイプを対象とするか、allowsFullSwipe でスワイプ時のデフォルトアクションを設定することができます
.swipeActions の content に設定する Button の role 設定を行うことで、表示色が変わります
Button に tink カラーを設定することでも表示色を変更することができます
content が Button ではないために、スワイプ操作に反応しません（コンパイルは通ります）