SwipeActions

SwipeActions 는 목록 행을 옆으로 밀면 그 뒤에서 액션 버튼이 드러나는 컴포넌트입니다. 보관 · 고정 · 삭제처럼 한 번에 끝나는 동작을 행을 열지 않고 곧바로 실행할 때 씁니다. 행은 child 이고, 시작 쪽 가장자리(leadingActions)와 끝 쪽 가장자리(trailingActions)에 액션을 따로 둡니다.

액션은 Button 을 합성해 그립니다. 이 컴포넌트가 정하는 것은 버튼이 놓이는 자리와 행이 움직이는 거리뿐이라, 버튼의 테마를 바꾸면 액션도 같이 바뀝니다. 행이 어디까지 따라오는지 · 놓았을 때 어디에 멈추는지 · 어느 정도 당기면 첫 액션이 실행되는지는 수치와 판정이라 Core 가 한 벌로 정하고, Flutter 와 Web 이 같은 답을 씁니다. 같은 당김은 두 플랫폼에서 같은 결과를 냅니다.

기본 사용법 (Basic Usage)#

SwipeActions(
  trailingActions: [
    CoreSwipeAction(
      label: '보관',
      icon: const Icon(LucideIcons.archive),
      onPressed: handleArchive,
    ),
    CoreSwipeAction(
      label: '삭제',
      icon: const Icon(LucideIcons.trash2),
      variant: CoreSwipeActionVariant.destructive,
      onPressed: handleDelete,
    ),
  ],
  child: Basic(
    leading: const Icon(LucideIcons.mail),
    title: const Text('주간 보고서'),
    subtitle: const Text('이번 주 진행 상황을 정리했어요'),
  ),
)

SwipeActions(
  trailingActions: [
    CoreSwipeAction(
      label: '보관',
      icon: const Icon(LucideIcons.archive),
      onPressed: handleArchive,
    ),
    CoreSwipeAction(
      label: '삭제',
      icon: const Icon(LucideIcons.trash2),
      variant: CoreSwipeActionVariant.destructive,
      onPressed: handleDelete,
    ),
  ],
  child: Basic(
    leading: const Icon(LucideIcons.mail),
    title: Text('주간 보고서'),
    subtitle: Text('이번 주 진행 상황을 정리했어요'),
  ),
)

첫 번째 액션이 가장 바깥, 곧 화면 가장자리에 가장 가까운 칸입니다. 전체 스와이프가 실행하는 것도 이 액션입니다.

빠른 오버라이드 (Chain)#

이미 만든 SwipeActions 인스턴스에 스타일을 빠르게 덧붙이고 싶다면 withStyle 체인을 쓸 수 있습니다. 생성자의 swipeActionsStyle 인자와 동일하게 동작하지만, 이미 구성된 위젯 위에서 바로 이어 쓸 수 있습니다.

class SwipeActionsChainExample extends StatelessWidget {
  const SwipeActionsChainExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SwipeActions(
      trailingActions: [
        CoreSwipeAction(
          label: '보관',
          icon: const Icon(LucideIcons.archive),
          onPressed: () => debugPrint('Archived'),
        ),
        CoreSwipeAction(
          label: '삭제',
          icon: const Icon(LucideIcons.trash2),
          variant: CoreSwipeActionVariant.destructive,
          onPressed: () => debugPrint('Deleted'),
        ),
      ],
      child: Basic(
        leading: const Icon(LucideIcons.mail),
        title: const Text('주간 보고서'),
        subtitle: const Text('이번 주 진행 상황을 정리했어요'),
      ),
    ).withStyle(
      const CoreSwipeActionsStyle(
        platterColor: CoreColor.token(CoreColors.surfaceContainer),
        fullSwipeScale: 1.08,
      ),
    );
  }
}

class SwipeActionsChainExample extends StatelessComponent {
  const SwipeActionsChainExample({super.key});

  @override
  Component build(BuildContext context) {
    return SwipeActions(
      trailingActions: [
        CoreSwipeAction(
          label: '보관',
          icon: const Icon(LucideIcons.archive),
          onPressed: () => print('Archived'),
        ),
        CoreSwipeAction(
          label: '삭제',
          icon: const Icon(LucideIcons.trash2),
          variant: CoreSwipeActionVariant.destructive,
          onPressed: () => print('Deleted'),
        ),
      ],
      child: Basic(
        leading: const Icon(LucideIcons.mail),
        title: Text('주간 보고서'),
        subtitle: Text('이번 주 진행 상황을 정리했어요'),
      ),
    ).withStyle(
      const CoreSwipeActionsStyle(
        platterColor: CoreColor.token(CoreColors.surfaceContainer),
        fullSwipeScale: 1.08,
      ),
    );
  }
}

Live Preview#

class SwipeActionsDefaultExample extends StatelessComponent {
  const SwipeActionsDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return SwipeActions(
      trailingActions: [
        CoreSwipeAction(
          label: '보관',
          icon: const Icon(LucideIcons.archive),
          onPressed: () => print('Archived'),
        ),
        CoreSwipeAction(
          label: '삭제',
          icon: const Icon(LucideIcons.trash2),
          variant: CoreSwipeActionVariant.destructive,
          onPressed: () => print('Deleted'),
        ),
      ],
      child: Basic(
        leading: const Icon(LucideIcons.mail),
        title: Text('주간 보고서'),
        subtitle: Text('이번 주 진행 상황을 정리했어요'),
      ),
    );
  }
}

class SwipeActionsDefaultExample extends StatelessWidget {
  const SwipeActionsDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SwipeActions(
      trailingActions: [
        CoreSwipeAction(
          label: '보관',
          icon: const Icon(LucideIcons.archive),
          onPressed: () => debugPrint('Archived'),
        ),
        CoreSwipeAction(
          label: '삭제',
          icon: const Icon(LucideIcons.trash2),
          variant: CoreSwipeActionVariant.destructive,
          onPressed: () => debugPrint('Deleted'),
        ),
      ],
      child: Basic(
        leading: const Icon(LucideIcons.mail),
        title: const Text('주간 보고서'),
        subtitle: const Text('이번 주 진행 상황을 정리했어요'),
      ),
    );
  }
}

행을 옆으로 끌어 보세요. 두 번째 예제는 SwipeActionScope 로 두 행을 감싸, 한 행을 열면 다른 행이 닫힙니다.

구조 (Anatomy)#

trailingActions 가 드러난 모습 (행을 시작 쪽으로 밀었을 때)
┌──────────────────────┬──────────────────┐
│ child                │  (icon)  (icon)  │   // platter: 행 뒤에 놓인 띠
│                      │  label   label   │   // 행이 비켜 준 폭만 보인다
└──────────────────────┴──────────────────┘
  row — 밀린 만큼 이동     platter

사용 시기 (When to Use)#

이 컴포넌트를 사용하세요:

• 목록의 각 행에서 보관 · 고정 · 삭제처럼 한두 번에 끝나는 동작이 반복될 때
• 터치 화면에서 행마다 버튼을 늘어놓으면 목록이 어수선해질 때 — 동작이 행 뒤에 숨었다가 밀면 드러납니다
• 가장 흔한 동작 하나를 길게 밀어 한 번에 끝내게 하고 싶을 때(전체 스와이프)

대신 다른 컴포넌트를 사용하세요:

• Button: 동작이 늘 보여야 할 때. 밀기는 눈에 보이지 않는 조작이라 마우스 사용자가 발견하기 어렵습니다. 이 컴포넌트는 같은 동작의 지름길이므로, 행에 눈에 보이는 경로가 따로 있는 편이 좋습니다
• DropdownMenu · ContextMenu: 동작이 서너 개를 넘어 한 줄 발판에 담기 어려울 때
• Swiper: 행의 동작이 아니라, 화면 가장자리에서 밀어 메뉴나 시트 같은 오버레이 패널을 열 때

Props / Parameters#

W 는 Flutter의 Widget, Web의 Jaspr Component 입니다. W? 는 선택 슬롯입니다.

액션이 없는 쪽으로는 밀리지 않습니다.

CoreSwipeAction 필드#

액션 하나는 위젯이 아니라 데이터입니다. 그려지는 모양은 합성된 Button 이 정합니다.

SwipeActionScope#

CoreSwipeActionsStyle 필드#

스타일 시스템 (Style System)#

CoreSwipeActionsStyle 은 발판을 그리는 숫자(actionWidth · actionSpacing · platterInset · platterColor), 라벨(labelGapStyle · labelStyle), 전체 스와이프 신호(fullSwipeScale), 그리고 합성된 버튼에 그대로 전달되는 actionButtonStyle 을 가집니다. 액션의 버튼 모양은 이 슬롯이 아니라 Button 의 것입니다. 변형(defaultVariant · destructive)이 각각 Button 의 변형을 고르므로, 삭제 액션만 다르게 칠하려면 Button 의 테마를 바꿉니다. actionButtonStyle 은 일부러 기본값이 없습니다 — null 이면 아무것도 전달하지 않고, 각 버튼이 자기 변형의 chrome 을 그대로 그립니다.

Resolve chain#

design system default
  → CoreSwipeActionsTheme.style
  → widget.swipeActionsStyle

변형별 슬롯(variantStyles)은 없습니다. 액션의 변형은 Button 이 그리기 때문입니다.

열리는 거리#

행이 열리는 거리는 칸의 수와 이 슬롯의 세 숫자가 정합니다. 칸 너비를 글자로 재지 않고 숫자로 정하기 때문에, 두 플랫폼이 텍스트를 배치하지 않고도 같은 거리를 압니다.

발판 너비 = 2 × platterInset + n × actionWidth + (n − 1) × actionSpacing

기본값에서 액션이 하나면 72, 둘이면 132, 셋이면 192 입니다. 라벨은 칸 너비 안에 한 줄로 그려지고 넘치면 말줄임표로 잘리므로, 라벨을 길게 쓰려면 actionWidth 를 함께 키웁니다.

테마로 덮어쓰기#

ThemeData.fromCore(
  CoreThemePresets.light,
  coreComponentTheme: CoreComponentTheme(
    swipeActions: CoreSwipeActionsTheme(
      style: CoreSwipeActionsStyle(
        platterColor: CoreColor.token(CoreColors.surfaceContainer),
      ),
    ),
  ),
)

디자이너 판단 값#

아래 값은 코드가 정답을 가리지 못해 디자이너가 판단한 값입니다. 기본값은 가장 보수적인 쪽이고, 대안은 같은 자리에서 바꿀 수 있는 다른 선택입니다.

변형 (Variants)#

액션 변형#

액션의 의미를 variant 로 말합니다. 의미가 합성된 Button 의 변형을 고르므로 모양은 Button 테마를 따릅니다.

양쪽 가장자리#

leadingActions 와 trailingActions 를 함께 넘기면 행을 어느 쪽으로 미느냐에 따라 다른 발판이 드러납니다. 두 방향은 읽기 방향을 따릅니다. 오른쪽에서 왼쪽으로 쓰는 로케일에서는 좌우가 뒤집힙니다.

SwipeActions(
  leadingActions: [
    CoreSwipeAction(
      label: '고정',
      icon: const Icon(LucideIcons.pin),
      onPressed: handlePin,
    ),
  ],
  trailingActions: [
    CoreSwipeAction(
      label: '삭제',
      icon: const Icon(LucideIcons.trash2),
      variant: CoreSwipeActionVariant.destructive,
      onPressed: handleDelete,
    ),
  ],
  child: row,
)

라벨 없이#

showLabels: false 는 버튼만 남깁니다. 라벨은 그려지지 않아도 접근 가능한 이름으로 남습니다.

SwipeActions(
  showLabels: false,
  trailingActions: [
    CoreSwipeAction(
      label: '삭제',
      icon: const Icon(LucideIcons.trash2),
      variant: CoreSwipeActionVariant.destructive,
      onPressed: handleDelete,
    ),
  ],
  child: row,
)

전체 스와이프 끄기#

첫 액션이 되돌릴 수 없는 동작이면 allowsFullSwipe: false 로 길게 밀어 실행되는 길을 막습니다. 발판보다 더 밀면 행이 저항을 받고, 놓으면 열립니다.

SwipeActions(
  allowsFullSwipe: false,
  trailingActions: [
    CoreSwipeAction(
      label: '삭제',
      icon: const Icon(LucideIcons.trash2),
      variant: CoreSwipeActionVariant.destructive,
      onPressed: handleDelete,
    ),
  ],
  child: row,
)

동작 스펙 (Behavior)#

수치는 논리 픽셀(Web 은 CSS 픽셀)이고 속도는 픽셀/초입니다.

인터랙션#

• 밀기: 포인터가 가로로 18 px 넘게 움직이고 세로 이동에 밀리지 않으면 행이 포인터를 따라 움직입니다. 세로 이동이 먼저 크면 그 입력은 스크롤러의 것이라 행은 반응하지 않습니다. 그래서 SwipeActions 를 쌓은 목록의 세로 스크롤을 가로채지 않습니다.
• 따라가기: 발판 너비 안에서는 포인터를 그대로 따라갑니다. 넘어가면 allowsFullSwipe 가 켜진 쪽은 행 너비까지 계속 따라가고, 꺼진 쪽은 넘친 거리의 25 % 만 따라가 늘어나는 듯이 저항합니다.
• 놓기: 놓은 순간 다음 규칙을 위에서부터 보고 처음 맞는 것이 결과입니다.
  1. 닫힌 자리(1 px 이내)이거나 액션이 없는 쪽이면 닫힙니다.
  2. 액션에서 멀어지는 방향으로 400 px/s 이상이면 닫힙니다. 전체 스와이프 거리를 넘겼어도 되돌리는 손길이면 닫히므로, 되돌릴 수 없는 액션이 되돌리던 제스처에서 실행되지 않습니다.
  3. 발판을 넘기고 전체 스와이프 거리 이상이면(켜진 쪽) 그 쪽 첫 액션이 실행되고 행이 닫힙니다. 거리는 fullSwipeThreshold × 행 너비이고, 발판보다 짧을 수는 없습니다.
  4. 액션 쪽으로 400 px/s 이상이면, 짧게 당겼어도 열립니다.
  5. 그 밖에는 가까운 자리에 멈춥니다. 발판의 절반 이상 열렸으면 열리고, 아니면 닫힙니다.
• 열린 행: 열린 행을 탭하면 child 에 닿지 않고 행이 닫힙니다. 열린 행에서 다시 밀 수 있고, 그 드래그는 열려 있던 쪽에 묶여 반대쪽 발판으로 넘어가지 않습니다.
• 액션 누르기: 버튼을 누르면 onPressed 가 호출되고 행이 닫힙니다. 전체 스와이프가 실행할 때도 같습니다.
• 취소: 시스템이 포인터를 가져가면(스크롤 시작 · 포인터 취소) 행은 드래그가 시작된 자리로 돌아갑니다. 취소된 당김은 거리와 상관없이 액션을 실행하지 않습니다.
• 호버 · 포커스: 행 자체에는 호버 반응이 없습니다. 액션 버튼은 Button 의 호버 · 포커스 반응을 그대로 갖습니다.

상태 전환#

• 행은 닫힘 · 시작 쪽 열림 · 끝 쪽 열림 셋 중 하나에 멈추고, 한 번에 한 쪽만 열립니다.
• 첫 액션이 비활성이면 그 쪽 전체 스와이프가 꺼져, 길게 밀어도 열리기만 합니다.
• enabled: false 이면 행은 밀리지 않고 늘 닫혀 있으며, 액션은 어느 경로로도 실행되지 않습니다.
• 액션의 개수가 바뀌면 열린 행은 닫힙니다. 열린 거리가 이전 개수로 정해진 값이기 때문입니다.
• SwipeActionScope 안에서는 한 행이 움직이기 시작하는 순간 열려 있던 다른 행이 닫힙니다. 포커스가 다른 행의 발판에 닿아 그 행이 열릴 때도 같습니다. 범위가 없으면 행은 서로 독립입니다. 스크롤하거나 행 밖을 탭해도 열린 행이 닫히지 않습니다.
• 프로그램에서 행을 열고 닫는 컨트롤러는 없습니다.

애니메이션#

• 정착: 놓은 행은 CoreDuration.normal(200 ms)에 걸쳐 멈출 자리로 갑니다. Flutter 는 놓는 속도를 이어받는 임계 감쇠 스프링(튕김 없음), Web 은 CoreEasing.enter 곡선의 CSS 전환(행의 transform 과 발판의 너비)입니다. 둘 다 넘치지 않고 같은 시간에 멈추지만 곡선이 같지는 않습니다. 스프링은 놓는 속도에서 출발하므로 앞 절반이 더 빠릅니다.
• 드래그 중: 정착 전환이 없습니다. 행이 포인터를 지연 없이 따라갑니다.
• 전체 스와이프 신호: fullSwipeScale 이 1 보다 크면 첫 액션 칸이 전체 스와이프 거리에 들어서는 동안 그 배율로 커집니다. 기본값 1 은 신호가 없습니다.
• 동작 줄이기: 정착 시간이 전환 단계 토큰이라 동작 줄이기를 켜면 두 플랫폼 모두 멈출 자리로 곧장 건너뜁니다. 드래그가 포인터를 따라가는 것은 그대로입니다.

사용 가이드라인 (Usage Guidelines)#

Do#

SwipeActions(
  trailingActions: [
    CoreSwipeAction(
      label: '보관',
      icon: const Icon(LucideIcons.archive),
      onPressed: handleArchive,
    ),
    CoreSwipeAction(
      label: '삭제',
      icon: const Icon(LucideIcons.trash2),
      variant: CoreSwipeActionVariant.destructive,
      onPressed: handleDelete,
    ),
  ],
  child: row,
)

Don't#

// ❌ 길게 밀면 확인 없이 삭제된다
SwipeActions(
  trailingActions: [
    CoreSwipeAction(
      label: '삭제',
      icon: const Icon(LucideIcons.trash2),
      variant: CoreSwipeActionVariant.destructive,
      onPressed: handleDelete,
    ),
  ],
  child: row,
)

Do#

SwipeActionScope(
  child: Column(
    children: [
      for (final mail in mails) buildRow(mail),
    ],
  ),
)

Don't#

// ❌ 칸 너비(48) 안에 한 줄로 들어가지 않는다
CoreSwipeAction(
  label: '읽지 않음으로 표시',
  icon: const Icon(LucideIcons.mailOpen),
  onPressed: handleMarkUnread,
)

Don't#

접근성 (Accessibility)#

역할#

• Flutter: 행에 액션마다 맞춤 시맨틱 액션(CustomSemanticsAction)이 걸립니다. 이름은 CoreSwipeAction.label 이고 비활성 액션은 빠집니다. 발판의 버튼은 button 역할에 같은 라벨을 이름으로 갖고, 화면에 보이는 라벨 글자는 시맨틱에서 제외해 두 번 읽히지 않습니다. 발판은 닫힌 행에서도 위젯 트리에 있어(폭 0 으로 잘려 있습니다) 키보드가 닿지만, 그 버튼은 그 쪽이 열려 화면에 드러나기 전까지 시맨틱 트리에서 빠져 있습니다. 화면에 없는 버튼을 스크린 리더가 찾게 하지 않기 위해서이고, 닫힌 행의 액션은 맞춤 액션으로 고릅니다.
• Web: 발판은 DOM 에 늘 있고(display: none · visibility: hidden 이 아니라 가로로 잘릴 뿐입니다), 각 액션은 <button> 입니다. 이름은 aria-label 이 라벨 문자열을 그대로 가져오고, 화면에 보이는 라벨 글자는 aria-hidden 입니다. enabled: false 인 행에는 발판이 렌더되지 않습니다.

키보드#

두 플랫폼의 키보드 경로는 같습니다. 밀기는 포인터로만 닿는 조작이라, 키보드에는 액션에 닿는 길이 따로 있어야 합니다.

순서는 위치가 아니라 구조로 정합니다. 닫힌 행은 액션을 폭 0 으로 잘라 두고, 행보다 액션이 넓으면 두 발판이 서로 겹쳐 놓이므로 위치는 순서를 말해 주지 못합니다. Web 은 DOM 순서가, Flutter 는 FocusTraversalOrder 가 같은 순서를 정합니다. 행 본문은 자기 안의 순서를 그대로 지키고 이 순서에서는 한 정지 지점입니다.

스크린 리더#

• Flutter: 행에 붙은 맞춤 액션이 스크린 리더의 액션 메뉴에 라벨로 나옵니다. 하나를 고르면 onPressed 가 실행되고 행이 닫힙니다. 그래서 드래그를 할 수 없는 사용자도 모든 활성 액션에 닿습니다. 포커스를 받은 버튼의 노드는 포커스 상태를 가지므로 스크린 리더가 키보드를 따라옵니다.
• Web: 액션 버튼의 이름은 라벨이고, 포커스가 닿으면 발판이 열려 버튼이 화면에 드러납니다.
• 행이 열리고 닫히는 것 자체는 통보하지 않습니다.

포커스 관리#

• 진입 — 발판의 버튼으로 포커스가 들어오면 그 쪽이 열리고, 행은 SwipeActionScope 의 자리를 차지해 열려 있던 다른 행을 닫습니다. 포커스가 보이는 자리에 있도록 하기 위해서입니다.
• 이탈 — 행이 닫힌 채 쉬게 되면, 닫히는 발판의 액션에 있던 포커스는 행으로 돌아옵니다. 무엇이 닫았든, 어느 플랫폼에서든 같습니다. Escape, 액션 실행, 밀거나 튕긴 뒤 놓기, 열린 행의 본문 탭, SwipeActionScope 의 다른 행이 움직이기 시작함, 다시 그리기(아래)가 모두 그렇습니다. 포인터는 포커스를 옮기지 않는 경우가 있어(Flutter 의 포인터, 브라우저의 터치로 밀기) 그대로 두면 포커스가 폭 0 으로 잘린 버튼에 남기 때문입니다. 발판 밖에 있던 포커스(다른 행, 행 본문의 입력, 아무 데도 없는 경우)와 열린 채 쉬는 행의 포커스는 건드리지 않고, 액션이 실행되면서 포커스를 다른 곳(편집 필드 등)으로 보냈다면 행은 그것을 되가져가지 않습니다. 행 자체는 Tab 정지 지점이 아니라 포커스를 보낼 수 있는 자리입니다(Web 은 루트의 tabindex="-1", Flutter 는 행의 포커스 노드). 포커스가 다른 곳으로 옮겨 가는 것만으로는 행이 닫히지 않습니다.
• 다시 그려서 닫힐 때 — 액션 개수가 바뀌거나, 행이 더는 밀 수 없게 되어(enabled: false, 액션이 하나도 없음) 행이 닫히거나 발판이 사라질 때도 같습니다. 그대로 두면 포커스가 폭 0 으로 잘린 버튼에 남거나, 버튼이 사라지면서 문서로 떨어지기 때문입니다. 액션 개수도 밀 수 있는지 여부도 바뀌지 않는 다시 그리기는 포커스를 옮기지 않고, 같은 다시 그리기로 사라지는 행 본문의 입력에서는 행이 포커스를 가져가지 않습니다. Web 은 다시 그리는 도중에 포커스를 옮기지 않고 그 변경이 문서에 반영된 뒤에 옮깁니다. 그 사이 같은 다시 그리기가 포커스를 다른 요소에 줬다면 그 요소가 갖습니다.
• 밀 수 없는 행 — 액션이 없거나 비활성인 행도 포커스를 보낼 수 있는 자리로 남습니다. Web 은 그 행의 루트에도 tabindex="-1" 을 붙이고 Flutter 의 행 포커스 노드는 늘 있습니다. 그래서 이미 행에 있던 포커스는 행이 비활성이 되어도 그대로입니다.
• 트랩 — 없음. 포커스는 행 안과 밖을 자유롭게 오갑니다.

알려진 제약#

• 밀기는 눈에 보이지 않는 조작입니다. 마우스 사용자는 발견하기 어려우므로 같은 동작의 눈에 보이는 경로를 함께 두는 편이 좋습니다.
• Escape 는 키보드 포커스가 행 안에 있을 때만 닿습니다. 밀어서 연 행에 포커스가 없으면 Escape 로 닫을 수 없고, 탭하거나 다른 행을 밀어서 닫습니다.
• 닫힌 행의 액션은 폭 0 으로 잘린 채 포커스를 받는 노드이기 때문에, 방향키로 포커스를 옮기는 환경(데스크톱 · TV 의 Flutter)에서는 방향키 탐색도 거기에 닿습니다. 닿는 순간 그 행이 열려 포커스가 보이지 않는 자리에 머물지는 않지만, 목록을 아래로 훑으면 행이 하나씩 열립니다(SwipeActionScope 안에서는 앞 행이 닫힙니다). 브라우저에서는 방향키가 포커스를 옮기지 않습니다.
• 행을 열고 닫는 프로그램 API 가 없고, 스크롤이나 행 밖 탭으로 열린 행이 닫히지 않습니다. 열린 행은 탭하거나 다른 행을 밀어서 닫습니다.
• 액션 버튼의 크기는 48 × 48 이라 전역 최소 터치 타겟(24 × 24)보다 큽니다.
• 칸의 높이는 버튼 48 에 간격과 라벨 한 줄을 더해 대략 66 이고 글자 배율에 따라 달라집니다. 라벨을 그릴 때 행이 그보다 낮으면 칸이 위아래로 잘립니다(두 플랫폼 모두 같습니다). 낮은 행에는 showLabels: false 로 아이콘만 그리세요. 그러면 칸이 48 이라 그 이상의 행에 들어갑니다.

전역 축(동작 줄이기 · 고대비 · 색 강제 모드 · 시맨틱 역할 · 최소 터치 타겟)은 접근성 페이지가 한 곳에서 다룹니다.

크로스 플랫폼 차이점 (Platform Differences)#

두 플랫폼의 생성자는 이름 · 순서 · 기본값이 같습니다. 차이는 같은 판정을 각 플랫폼이 어떻게 입력받고 그리는가에 있습니다.

관련 컴포넌트 (Related Components)#

• Basic: 행 본문으로 가장 흔히 넣는 슬롯 레이아웃
• Button: 액션이 합성하는 버튼. 액션의 모양은 이 컴포넌트의 테마를 따릅니다
• Listing: 행을 쌓는 목록 컨테이너
• Gap: 행 사이의 간격

조합 예제#

SwipeActionScope(
  child: ListView.separated(
    itemCount: mails.length,
    separatorBuilder: (context, index) => const Divider(),
    itemBuilder: (context, index) {
      final mail = mails[index];
      return SwipeActions(
        trailingActions: [
          CoreSwipeAction(
            label: '보관',
            icon: const Icon(LucideIcons.archive),
            onPressed: () => handleArchive(mail),
          ),
        ],
        child: Basic(
          leading: const Icon(LucideIcons.mail),
          title: Text(mail.subject),
          subtitle: Text(mail.preview),
        ),
      );
    },
  ),
)