일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 서버의 서비스 방식
- nginx https 설정
- Linux oh my zsh
- Logback
- Linux 디렉터리 역할
- ec2 ssh unprotected private key file
- UNPROTECTED PRIVATE KEY FILE
- 아비트럼 새폴리아 이더 받는법
- git 계정 설정
- EC2 oh my zsh
- git branch
- AWS EC2 서버 만들기
- EC2 Apache2
- ssl 인증서 발급받기
- javascript scope
- linux background
- arbitrum sepolia eth
- Git 브랜치
- Linux 디렉터리 구조
- EC2 zsh
- git switch
- Linux apt-get
- HTTP Web Server
- javascript 정렬
- GIT
- EC2 HTTP 호스팅
- git 기본 에디터
- Linux apt
- linux foreground
- Navigation Pattern
Archives
- Today
- Total
HyunJun 기술 블로그
Navigation Pattern, PageView 본문
728x90
1. PageView
PageView는 여러 페이지를 좌우로 스와이프 하여 전환할 수 있는 위젯으로, 페이지 간의 슬라이드 애니메이션을 제공한다. 사용자가 화면을 좌우로 스와이프 하면 다음 페이지로 자연스럽게 이동되며, 페이지 전환이 간단하고 직관적으로 이루어지는 특징이 있다. PageView는 일반적으로 페이지 컨텐츠가 넓은 화면 공간에 맞지 않을 때 사용된다.
예를 들어, 앱의 홈 화면이나 이미지 뷰어와 같이 다양한 페이지를 효과적으로 표시해야 할 때 주로 사용된다. 주요 속성으로는 itemBuilder, controller, onPageChanged, physics 등이 있다. itemBuilder는 페이지를 동적으로 생성하는 콜백 함수를 지정하며, controller는 PageView의 컨트롤러를 지정하여 페이지 전환을 관리할 수 있다. onPageChanged는 현재 페이지 인덱스가 변경될 때 호출되는 콜백으로, 페이지 전환 이벤트를 처리하는 데 사용된다. physics는 페이지 스와이프 동작을 제어하는 데 사용되며, 사용자의 스와이프 속도나 스크롤 가능 여부를 설정할 수 있다. PageView는 다양한 앱에서 화면 전환, 페이지 뷰어, 이미지 슬라이더 등의 용도로 활용되며, 사용자 친화적인 인터페이스를 구현하는데 유용한 위젯이다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _currentPage = 0;
final List<String> pages = ["Page 1", "Page 2", "Page 3"];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('PageView Example'),
),
body: PageView.builder(
itemCount: pages.length,
onPageChanged: (int index) {
setState(() {
_currentPage = index;
});
},
itemBuilder: (context, index) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(
pages.length,
(pageIndex) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: _buildCircleIndicator(pageIndex == _currentPage),
);
},
),
),
SizedBox(height: 16),
Text(
pages[index],
style: TextStyle(fontSize: 24),
),
],
),
);
},
),
);
}
Widget _buildCircleIndicator(bool isCurrentPage) {
return Container(
width: 12,
height: 12,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: isCurrentPage ? Colors.blue : Colors.grey,
),
);
}
}
728x90
Comments