Flutter |
您所在的位置：网站首页 › 示差检测器检定 › Flutter |
Flutter
|
내가 보려고 쓰는 Flutter 일기 참고1 : https://api.flutter.dev/flutter/widgets/PageView-class.html PageView오늘 배워볼 건 PageView 여러 페이지를 보여주는 스크롤 가능한 영역이다. 좌우, 또는 상하로 밀었을 때 다음 페이지가 뜨는 것이다. 평소 앱을 사용할 떄, 여러 장의 사진을 한 프레임 안에서 좌우로 밀어서 볼 때를 생각하면 된다. 예시를 보면 바로 이해가 된다. 코드로 넘어가보자 코드 예시로 알아보자공식 페이지에서 제공하는 코드를 가져다가 조금 수정해서 돌려보았다. PageView 기본 생성자 import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); /// This is the main application widget. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static const String _title = 'Text PageView'; @override Widget build(BuildContext context) { return MaterialApp( title: _title, home: Scaffold( appBar: AppBar(title: const Text(_title)), body: const PageViewWidget(), ), ); } } /// This is the stateless widget that the main application instantiates. class PageViewWidget extends StatelessWidget { const PageViewWidget({Key? key}) : super(key: key); @override Widget build(BuildContext context) { final PageController controller = PageController(initialPage: 0, viewportFraction: 0.8); return PageView( scrollDirection: Axis.horizontal, controller: controller, children: [ Container( color: Colors.blue.withOpacity(0.5), child: Center( child: Text('첫 번째 페이지',style: TextStyle(fontSize: 50),), ), ), Container( color: Colors.orangeAccent.withOpacity(0.5), child: Center( child: Text('두 번째 페이지',style: TextStyle(fontSize: 50),), ), ), Container( color: Colors.cyanAccent.withOpacity(0.5), child: Center( child: Text('세 번째 페이지',style: TextStyle(fontSize: 50),), ), ), ], ); } }2번 일기에서 썼던 ListView와 참 비슷하게 생겼다... builder 생성자 있는 것 마저도 똑같다. 다른 점은 PageView는 controller를 쓴다는 것! (하지만 꼭 쓰지 않아도 된다.) final PageController controller = PageController(initialPage: 0, viewportFraction: 0.8);initialPage는 앱 처음 빌드 때 몇번째 페이지를 먼저 보여줄 것인지 결정한다. 0이면 맨 처음 자식 요소를 보여준다. viewportFraction 은 자식 요소로 넣어둔 페이지가 보여지는 영역이 얼마나 되는지를 결정한다. 이 속성 때문에 배경색이 보이도록 코드를 조금 손대보았다. 실행화면을 보자. viewportFraction : 0.8viewportFraction : 1.gif) .gif)
이제 builder 생성자를 보자. PageView.builderListView.buider와 쓰는 방법이 비슷하다. 자식요소들을 하나하나 나열하지 않고 itemBuilder로 페이지를 와그르르 만든다. 코드를 바로 보자. import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); /// This is the main application widget. class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static const String _title = 'Text PageView'; @override Widget build(BuildContext context) { return MaterialApp( title: _title, home: Scaffold( appBar: AppBar(title: const Text(_title)), body: const PageViewWidget(), ), ); } } /// This is the stateless widget that the main application instantiates. class PageViewWidget extends StatefulWidget { const PageViewWidget({Key? key}) : super(key: key); @override _PageViewWidgetState createState() => _PageViewWidgetState(); } class _PageViewWidgetState extends State { int currentPage = 0; List pageName = ["First Page", "Second Page", "Third Page"]; final PageController controller = PageController(initialPage: 0, viewportFraction: 0.8); @override Widget build(BuildContext context) { return PageView.builder( controller: controller, onPageChanged: (value) { setState(() { currentPage = value; }); }, itemCount: pageName.length, itemBuilder: (context, index) { return Container( color: Colors.blue.withOpacity(index * 0.1), child: Center( child: Text( pageName[index], style: TextStyle(fontSize: 50), ), ), ); }, ); } }위의 실행코드와 유사하게 만들어보았다. 실행화면은 아래와 같다. controller 사용controller 미사용.gif) .gif)
이번에는 controller를 지워보았는데, initialPage가 0으로 자동 설정되는 거랑 viewportFraction 가 1로 설정되는 것 뿐 없어도 상관없다. PageView 기본 생성자에도 마찬가지다. 없어도 됨! 그렇다면 난 안 쓰고 싶...어 오늘의 일기는 여기까지! |
【本文地址】