「Flutter/UI/PageView」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「==PageView基本== <pre> PageView( children: <Widget>[ Container( color: Colors.pink, ), Container( color: Colors.cyan, ), Container(...」) |
(→無限) |
||
| 行25: | 行25: | ||
) | ) | ||
</pre> | </pre> | ||
| + | |||
| + | ==色々制御== | ||
| + | PageView pageView = PageView( | ||
| + | controller: _pageController, | ||
| + | children: <Widget>[ | ||
| + | pageWidget, | ||
| + | pageThreadWidget | ||
| + | ], | ||
| + | onPageChanged: _onPageViewChange, | ||
| + | ); | ||
| + | // ページ移動イベント | ||
| + | _onPageViewChange(int page) { | ||
| + | print("Current Page: " + page.toString()); | ||
| + | } | ||
| + | // 削除 | ||
| + | @override | ||
| + | void dispose() { | ||
| + | _pageController.dispose(); | ||
| + | super.dispose(); | ||
| + | } | ||
| + | // ページ移動アニメーション | ||
| + | if (_pageController.hasClients) { | ||
| + | _pageController.animateToPage( | ||
| + | 1, | ||
| + | duration: const Duration(milliseconds: 400), | ||
| + | curve: Curves.easeInOut, | ||
| + | ); | ||
| + | } | ||
| + | // ページ移動アニメーションなし | ||
| + | if (_pageController.hasClients) { | ||
| + | _pageController.jumpToPage(0); | ||
| + | } | ||
==参考== | ==参考== | ||
https://medium.com/flutter-community/a-deep-dive-into-pageview-in-flutter-with-custom-transitions-581d9ea6dded | https://medium.com/flutter-community/a-deep-dive-into-pageview-in-flutter-with-custom-transitions-581d9ea6dded | ||
2020年1月21日 (火) 00:16時点における最新版
PageView基本
PageView(
children: <Widget>[
Container(
color: Colors.pink,
),
Container(
color: Colors.cyan,
),
Container(
color: Colors.deepPurple,
),
],
)
無限
PageView.builder(
itemBuilder: (context, position) {
return Container(
color: position % 2 == 0 ? Colors.pink : Colors.cyan,
);
},
)
色々制御
PageView pageView = PageView(
controller: _pageController,
children: <Widget>[
pageWidget,
pageThreadWidget
],
onPageChanged: _onPageViewChange,
);
// ページ移動イベント
_onPageViewChange(int page) {
print("Current Page: " + page.toString());
}
// 削除
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
// ページ移動アニメーション
if (_pageController.hasClients) {
_pageController.animateToPage(
1,
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
);
}
// ページ移動アニメーションなし
if (_pageController.hasClients) {
_pageController.jumpToPage(0);
}
