반응형
Jake Seo
제이크서 위키 블로그
Jake Seo
전체 방문자
오늘
어제
  • 분류 전체보기 (715)
    • 일상, 일기 (0)
    • 백준 문제풀이 (1)
    • 릿코드 문제풀이 (2)
    • 알고리즘 이론 (10)
      • 기본 이론 (2)
      • 배열과 문자열 (8)
    • 데이터베이스 (15)
      • Planet Scale (1)
      • MSSQL (9)
      • 디비 기본 개념 (1)
      • SQLite 직접 만들어보기 (4)
    • 보안 (7)
    • 설계 (1)
    • 네트워크 (17)
      • HTTP (9)
      • OSI Layers (5)
    • 회고 (31)
      • 연간 회고 (2)
      • 주간 회고 (29)
    • 인프라 (52)
      • 도커 (12)
      • AWS (9)
      • 용어 (21)
      • 웹 성능 (1)
      • 대규모 서비스를 지탱하는 기술 (9)
    • 깃 (7)
    • 빌드 도구 (7)
      • 메이븐 (6)
      • 그레이들 (0)
    • Java (135)
      • 이펙티브 자바 (73)
      • 자바 API (4)
      • 자바 잡지식 (30)
      • 자바 디자인 패턴 (21)
      • 톰캣 (Tomcat) (7)
    • 프레임워크 (64)
      • next.js (14)
      • 스프링 프레임워크 (28)
      • 토비의 스프링 (6)
      • 스프링 부트 (3)
      • JPA (Java Persistence API) (5)
      • Nest.js (8)
    • 프론트엔드 (48)
      • 다크모드 (1)
      • 노드 패키지 관리 매니저 (3)
      • CSS (19)
      • Web API (11)
      • tailwind-css (1)
      • React (5)
      • React 새 공식문서 요약 (1)
      • HTML (Markup Language) (5)
    • 자바스크립트 (108)
      • 모던 자바스크립트 (31)
      • 개념 (31)
      • 정규표현식 (5)
      • 코드 스니펫 (1)
      • 라이브러리 (6)
      • 인터뷰 (24)
      • 웹개발자를 위한 자바스크립트의 모든 것 (6)
      • 팁 (2)
    • Typescript (49)
    • 리눅스와 유닉스 (10)
    • Computer Science (1)
      • Compiler (1)
    • IDE (3)
      • VSCODE (1)
      • IntelliJ (2)
    • 세미나 & 컨퍼런스 (1)
    • 용어 (개발용어) (16)
      • 함수형 프로그래밍 용어들 (1)
    • ORM (2)
      • Prisma (2)
    • NODEJS (2)
    • cypress (1)
    • 리액트 네이티브 (React Native) (31)
    • 러스트 (Rust) (15)
    • 코틀린 (Kotlin) (4)
      • 자바에서 코틀린으로 (4)
    • 정규표현식 (3)
    • 구글 애널리틱스 (GA) (1)
    • SEO (2)
    • UML (2)
    • 맛탐험 (2)
    • 리팩토링 (1)
    • 서평 (2)
    • 소프트웨어 공학 (18)
      • 테스팅 (16)
      • 개발 프로세스 (1)
    • 교육학 (1)
    • 삶의 지혜, 통찰 (1)
    • Chat GPT (2)
    • 쉘스크립트 (1)
    • 컴파일 (2)
    • Dart (12)
    • 코드팩토리의 플러터 프로그래밍 (4)
    • 플러터 (17)
    • 안드로이드 스튜디오 (1)
    • 윈도우즈 (1)
    • 잡다한 백엔드 지식 (1)
    • 디자인 패턴 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • serverless computing
  • 팩터리 메서드 패턴
  • 자바스크립트
  • Javadoc 자바독 자바주석 주석 Comment
  • 자바 디자인패턴
  • 빈 검증
  • 메이븐 골
  • Pre-rendering
  • prerendering
  • 프로그래머의 뇌
  • Next.js
  • 이펙티브 자바
  • 이펙티브자바
  • 자바스크립트 면접
  • 느린 쿼리
  • 참조 해제
  • bean Validation
  • 스프링 검증
  • 싱글턴
  • 자바 검증
  • 싱글톤 패턴
  • next js app
  • 자료구조
  • 메이븐 페이즈
  • 러스트
  • 도커공식문서
  • 슬로우 쿼리
  • 서버리스 컴퓨팅
  • 알고리즘
  • item8
  • 토비의 스프링
  • 메이븐 라이프사이클
  • item9
  • 디자인패턴
  • 플라이웨이트패턴
  • try-with-resources
  • item7
  • pnpm
  • 싱글톤
  • NEXT JS
  • 외래키 제약조건
  • rust
  • MSSQL
  • 작업기억공간
  • 이펙티브 자바 item9
  • 추상 팩터리 패턴
  • 자바스크립트 인터뷰
  • 객체복사
  • 자바
  • Java

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Jake Seo

제이크서 위키 블로그

플러터

플러터의 상호작용 중 제스처(Gesture) 란?

2023. 10. 29. 18:56

제스처 관련 위젯

  • Flutter 에서 제스처 시스템은 두가지 레이어로 나뉨
    • 첫번째 레이어는 raw pointer events 로 포인터의 움직임과 위치를 기술함 (터치, 마우스, 스타일러스 펜)
    • 두번째 레이어는 gesture 라고 의미론적인 액션으로 하나 이상의 포인터 움직임으로 구성됨
  • 제스처의 종류 공식문서

Pointers

  • PointerDownEvent: 포인터가 화면의 특정 위치에 가는 것
  • PointerMoveEvent: 포인터가 한 위치에서 다른 위치로 이동하는 것
  • PointerUpEvent: 포인터가 화면에 더이상 접촉하지 않는 것
  • PointerCancelEvent: 포인터의 입력이 더이상 이 앱을 향하지 않는 것

터치가 되면 (On pointer down), hit test 라는 것이 일어난다.
프레임워크는 화면에 어떤 위젯이 존재하는지 확인한 뒤,
포인터 다운 이벤트와 후속 이벤트가 히트 테스트에서 찾은 가장 안쪽 위젯으로 전송된다.
이벤트는 트리를 따라 가장 안쪽 위젯에서 트리의 루트 경로에 있는 모든 위젯에 발송된다.

위젯 레이어에서 직접 포인터 이벤트를 수신하려면 리스너 위젯을 사용해도 되지만, 일반적으론 제스처를 대신 사용하는 것이 좋다.

Gestures

  • 의미론적인 액션을 표현한다

Tap

  • onTapDown: 터치가 일어난 것 (탭을 트리깅하는 포인터가 화면의 특정 위치에 컨택한 것)
  • onTapUp: 터치 손가락을 뗀 것 (탭을 트리깅하는 포인터가 특정 위치에서 컨택이 멈춘 것)
  • onTap: onTapDown 과 onTapUp 이 연결되어 onTap 이 발생하게 된다.
  • onTabCancel: 이전에 onTapDown 을 트리깅 했던 포인터가 onTab 을 일으키지 않은 경우 (모종의 이유로 경고 창이 뜨거나 했을 때인듯)

Double tap

  • onDoubleTap: 유저가 스크린의 같은 장소를 빠르게 두번 탭 하는 것

Long press

  • onLongPress: 포인터가 스크린의 같은 장소에서 오랜 시간동안 컨택된 채로 있는 것

Vertical drags

  • onVerticalDragStart: 수직으로 드래그를 시작했을 때
  • onVerticalDragUpdate: 수직으로 드래그 중일 때 (드래그 위치가 업데이트 되는 중일 때)
  • onVerticalDragEnd: 수직으로 드래그를 끝냈을 때

Horizontal drags

  • onHorizontalDragStart: 수평으로 드래그를 시작했을 때
  • onHorizontalDragUpdate: 수평으로 드래그 중일 때 (드래그 위치가 업데이트 되는 중일 때)
  • onHorizontalDragEnd: 수평으로 드래그를 끝냈을 때

Pan

  • onPanStart: 수평 혹은 수직으로 드래그를 시작했을 때
  • onPanUpdate: 수평 혹은 수직으로 드래그 중일 때 (드래그 위치가 업데이트 되는 중일 때)
  • onPanEnd: 수평 혹은 수직으로 드래그를 끝냈을 때

Scale

  • onScaleStart: 확대를 시작했을 때
  • onScaleUpdate: 확대 중일 때 (드래그 위치가 업데이트 되는 중일 때)
  • onScaleEnd: 확대를 끝냈을 때

InkWell

  • Material UI 에 기본으로 들어가 있는 물결처럼 퍼지는 효과
  • 직접 넣어볼 수도 있다.

제스처 모호성

  • 화면의 특정 위치에 여러개의 제스처 인식기가 있을 수 있다
  • 화면에 지정된 포인터에 대해 제스처 인식기가 두개 이상 있다면, 프레임워크는 각 인식기가 제스처 영역에 참여하도록 해서 사용자가 의도하는 제스처를 명확히 구분하려 한다.
    • 두개가 동시에 발현되지 않는다.
    • 이를 제스처 아레나라고 한다.
  • 제스처 아레나에서는 다음 두 규칙에 의해 어떤 제스처가 승리할지 결정한다.
    • 제스처 인식기는 언제든 스스로를 제거할 수 있다.
    • 제스처 인식기 중 하나가 자신을 승리자로 선언하면 나머지 모든 인식기가 패배한다.
  • ex) 수평과 수직 인식기 두개가 결합한다면 좌표를 판단하여 수직으로 혹은 수평으로 더 많이 움직였는지를 판단하고 승자를 정한다.
    • 인식기가 하나만 있을 때는 바로 수평 혹은 수직 드래그로 인식시킬 수 있지만, 제스처 아레나가 열리는 경우 드래그가 끝나야 알 수 있다.
반응형
저작자표시 비영리 (새창열림)

'플러터' 카테고리의 다른 글

플러터(Flutter) 의 RefreshIndicator 란?  (5) 2023.11.12
플러터(Flutter) 의 FutureBuilder 란?  (0) 2023.11.11
플러터(Flutter) 의 컨트롤러 (Controller) 란?  (0) 2023.11.11
Flutter Dio 라이브러리란?  (0) 2023.11.11
플러터 ListView 에서 사용되는 옵션들 간단하게 정리  (2) 2023.11.11
    '플러터' 카테고리의 다른 글
    • 플러터(Flutter) 의 FutureBuilder 란?
    • 플러터(Flutter) 의 컨트롤러 (Controller) 란?
    • Flutter Dio 라이브러리란?
    • 플러터 ListView 에서 사용되는 옵션들 간단하게 정리
    Jake Seo
    Jake Seo
    ✔ 잘 보셨다면 광고 한번 클릭해주시면 큰 힘이 됩니다. ✔ 댓글로 틀린 부분을 지적해주시면 기분 나빠하지 않고 수정합니다. ✔ 많은 퇴고를 거친 글이 좋은 글이 된다고 생각합니다. ✔ 간결하고 명료하게 사람들을 이해 시키는 것을 목표로 합니다.

    티스토리툴바