> For the complete documentation index, see [llms.txt](https://developer.aliothx.net/start/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.aliothx.net/start/uiux/ui-ux/pageview.md).
# 페이지뷰 (PageView)
## 기본 페이지뷰
### 가로 방향 전환
```dart
PageView(
pageSnapping: true,
scrollDirection: Axis.horizontal,
controller: PageController(initialPage: 0),
children: [
Container(
color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
Container(
color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
Container(
color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
Container(
color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
Container(
color: Colors.cyan[400], child: Center(child: Text('Page 5')))
],
);
```
* ***`pageSnapping`***: 페이지 뷰에서 스냅 스크롤링을 사용할지 여부를 나타내는 속성입니다. ***`true`***로 설정하면 페이지뷰가 한 번에 한 페이지 씩 스크롤 됩니다.
* ***`scrollDirection`***: 페이지뷰의 스크롤 방향을 지정하는 속성입니다. ***`Axis.horizontal`***로 설정하면 가로 방향으로 페이지를 넘길 수 있습니다.
* ***`controller`***: 페이지뷰를 제어하는 컨트롤러 입니다. 이 컨트롤러를 사용하여 특정 페이지로 이동할 수 있습니다.
* ***`children`***: 페이지 뷰에 표시할 페이지들을 나타내는 위젯 목록입니다.
위의 코드를 통해 생성된 페이지뷰는 사용자에게 여러 페이지를 제공하며, 사용자는 좌우로 스와이프 하여 페이지를 전환할 수 있습니다. 페이지뷰를 스와이프 하면 컨테이너 위젯 내용이 변경되어 해당 페이지의 내용이 화면에 나타납니다.
#### **활용 예시**
* 이미지 갤러리 앱에서 이미지 간 미리보기
* 화면 안내 및 튜토리얼 페이지
* 제품 또는 콘텐츠 목록에서 세부 정보 페이지
페이지뷰 위젯은 사용자 경험을 향상시키는 데 유용한 도구 중 하나 입니다. 여러 페이지를 가로 방향으로 넘겨가며 정보를 제공하거나 다양한 콘텐츠를 표시하는 데 활용할 수 있습니다.
### 세로 방향 전환
```dart
PageView(
pageSnapping: true,
scrollDirection: Axis.vertical,
controller: PageController(initialPage: 0),
children: [
Container(
color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
Container(
color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
Container(
color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
Container(
color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
Container(
color: Colors.cyan[400], child: Center(child: Text('Page 5')))
],
);
```
* ***`pageSnapping`***: 페이지뷰에서 스냅 스크롤링을 사용할지 여부를 나타내는 속성입니다. ***`true`***로 설정하면 페이지뷰가 한 번에 한 페이지씩 스크롤됩니다.
* ***`scrollDirection`***: 페이지뷰의 스크롤 방향을 지정하는 속성입니다. ***`Axis.vertical`***로 설정하면 세로 방향으로 페이지를 넘길 수 있습니다.
* ***`controller`***: 페이지뷰를 제어하는 컨트롤러입니다. 이 컨트롤러를 사용하여 특정 페이지로 이동할 수 있습니다.
* ***`children`***: 페이지뷰에 표시할 페이지들을 나타내는 위젯 목록입니다.
위의 코드를 통해 생성된 페이지뷰는 사용자에게 여러 페이지를 제공하며, 사용자는 위아래로 스와이프 하여 페이지를 전환할 수 있습니다. 페이지뷰를 스와이프 하면 컨테이너 위젯 내용이 변경되어 해당 페이지의 내용이 화면에 나타납니다.
**활용 예시**
* 전화번호부 앱에서 연락처 목록을 표시하고 세부 정보 페이지로 이동
* 홈 화면에서 여러 정보 블록을 스크롤하면서 콘텐츠를 표시
* 다양한 종류의 설문조사나 양식을 작성하는 어플리케이션
세로 방향으로 페이지를 넘길 수 있는 페이지뷰 위젯은 다양한 애플리케이션에서 사용자에게 편리하고 직관적인 경험을 제공하는 데 활용됩니다. 사용자는 위아래로 스와이프 하면서 여러 페이지를 탐색하고 정보를 확인할 수 있습니다.
### indicator
```dart
IndicatorPageView(
children: [
Container(
color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
Container(
color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
Container(
color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
Container(
color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
Container(
color: Colors.cyan[400], child: Center(child: Text('Page 5')))
],
dotHeight: 10,
dotWidth: 10,
dotColor: Colors.cyan[100],
activeDotColor: Colors.cyan,
type: WormType.thin,
offset: 16.0,
spacing: 10.0,
radius: 20,
strokeWidth: 1.0,
paintStyle: PaintingStyle.fill,
count: 5,
scrollDirection: Axis.horizontal,
height: MediaQuery.of(context).size.height * 0.8,
padding: const EdgeInsets.only(top: 6),
);
```
인디케이터로 제어할 수 있는 페이지뷰를 구현합니다.
## 애니메이션 페이지뷰
페이지 전환 시에 애니메이션 효과를 구현합니다.
### 가로 방향 전환
```dart
AnimationPageView(
Rotate.x,
controller: PageController(),
currentPageValue: 0.0,
pages: [
Container(
color: Colors.cyan[50], child: Center(child: Text('Page 1'))),
Container(
color: Colors.cyan[100], child: Center(child: Text('Page 2'))),
Container(
color: Colors.cyan[200], child: Center(child: Text('Page 3'))),
Container(
color: Colors.cyan[300], child: Center(child: Text('Page 4'))),
Container(
color: Colors.cyan[400], child: Center(child: Text('Page 5')))
],
);
```
페이지뷰 위젯의 화면을 가로 방향으로 전환합니다.
### 세로 방향 전환