PageView class
페이지별로 작동하는 스크롤 가능한 목록입니다.
페이지 뷰의 각 자식은 뷰포트와 동일한 크기가 되도록 강제됩니다.
PageController를 사용하여 뷰에 표시되는 페이지를 제어할 수 있습니다. PageController 는 PageView 내부 콘텐츠의 픽셀 오프셋을 제어할 수 있을 뿐만 아니라 , 뷰포트 크기의 증분인 페이지 단위로 오프셋을 제어할 수도 있습니다.
PageController는 PageView가 처음 생성될 때 어떤 페이지가 표시되는지 결정하는 PageController.initialPage 와 뷰포트 크기에 대한 분수로 페이지 크기를 결정하는 PageController.viewportFraction 을 제어하는 데에도 사용할 수 있습니다.
공식 문서 코드
PageView 가 무엇인가 하면 가장 쉽게 설명할 수 있는 것은 인스타그램의 포스트이다.
옆으로 스와이프 하면 자동 정렬이 되며 다음 사진으로 넘어가게 된다. PageView 는 그 작업을 간단하게 수행해 주는 위젯이다.
위의 다트 패드 예제로 사용해 보면 좋을 것인데 많은 사람들이 모르는 것 같아 팁을 주자면 가로 스크롤은 (Shift + 마우스 휠) 로 스크롤이 가능하다. 암튼 이렇게 스크롤해 보면 스크롤한 것이 리스트처럼 넘어가지 않고 자동정렬로 맞춰지는 것을 알 수가 있다.
한번 간단하게 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| allowImplicitScrolling | bool | false | 스크롤 시 접근성 이동을 허용할지 여부를 설정 |
| restorationId | String? | – | 스크롤 위치 복원을 위한 ID |
| scrollDirection | Axis | Axis.horizontal | 스크롤 방향을 설정 |
| reverse | bool | false | 스크롤 방향을 반전할지 여부를 설정 |
| controller | PageController? | – | 스크롤 위치를 제어하는 컨트롤러 |
| physics | ScrollPhysics? | – | 사용자 입력에 대한 스크롤 반응 방식을 설정 |
| pageSnapping | bool | true | 페이지가 스냅되도록 할지 여부를 설정 |
| onPageChanged | ValueChanged<int>? | – | 페이지 변경 시 호출되는 콜백 함수 |
| childrenDelegate | SliverChildDelegate | – | 자식 위젯을 제공하는 위임 객체 |
| dragStartBehavior | DragStartBehavior | DragStartBehavior.start | 드래그 시작 시 동작 방식을 설정 |
| clipBehavior | Clip | Clip.hardEdge | 페이지를 클립할 때 사용하는 방법을 설정 |
| hitTestBehavior | HitTestBehavior | HitTestBehavior.opaque | 히트 테스트 시의 동작 방식을 설정 |
| scrollBehavior | ScrollBehavior? | – | 스크롤 동작에 대한 커스텀 설정 |
| padEnds | bool | true | 양 끝에 패딩을 추가할지 여부를 설정 |
음 일단 다른 거 다 볼 필요 없고 먼저 스크롤되는 위젯이다? 일단 무조건 controller 부터 넣어주면 되겠다.
ScrollController scrollController = ScrollController();
이 ScrollController 값으로 PageView 를 제어할 수 있다.
그리고 당연하게도 스크롤되는 위젯들의 종특인 사이즈를 지정해줘야 한다.사용할 때 꼭!! SizedBox 로 감싸서 제작하거나 크기를 줄 수 있는 위젯으로 감싼 후 제작하자!
SizedBox(
height: 150,
width: 450,
child: PageView(
이번엔 굉장히 많이 사용되는 친구를 소개할 것인데 바로 한 화면에 두 개 이상 표시가 되겠다.
아마 이대로 사용하면 위의 예제처럼 한 화면을 한 PageView 가 차지하고 있는 모습을 볼 수가 있는데 우리가 개발할 때 한 화면에 여러 개의 아이템이 있어야 하는 경우도 분명 있을 것이다.
그럴 때에 사용할 것이 바로 ScrollController 안에 있는 viewportFraction 값인데 이 값은 double을 인자로 받는 친구다.
그럼 여기다가 무엇을 넣어주냐? 1 / n 의 값을 넣어주면 된다. 여기서 n 은 자신이 표시하고자 하는 아이템 수인데, 예를 들어 내가 아이템 3개를 표시하고 싶다. 그렇다면 1 / 3, 즉 0.33 을 넣어주면 된다.
PageController pageController = PageController(viewportFraction: 0.33);
이러면 컨트롤러를 연결해 놓은 PageView 에서 이제 아이템 3개가 표시가 될 텐데
아마 앞의 한 칸이 띄어져 있을 것이다.
여기서 이제 PageView 의 하위 속성인 padEnds 를 false 로 설정해 주면 양옆 패딩이 사라지게 된다.
페이지뷰는 리스트와 다르게 위의 예제와 같이 현재 보고 있는 인덱스라는 것이 존재하기 때문에 비교적 쉽게 페이징 기능도 구현을 할 수가 있다. 그것은 위의 공식 예제 코드를 참고하도록 하자.
이렇게 이번엔 PageView 를 알아보았다. 이 친구는 내가 보통 .builder 를 붙여서 많이 사용하는데 굉장히 오랫동안 많이 볼 녀석 같으니 미리미리 공부를 해둬야 추후에 좋을 것 같다. 그렇다면 도움이 되었길 바라며 이만 마치겠다.
