一統天下 flutter - widget 滾動類: PageView - 頁面滾動切換
示例如下:
lib\widget\scroll\page_view.dart
/*
* PageView - 頁面滾動切換
*/
import 'package:flutter/material.dart';
import '../../helper.dart';
class PageViewDemo extends StatefulWidget {
const PageViewDemo({Key? key}) : super(key: key);
@override
_PageViewDemoState createState() => _PageViewDemoState();
}
class _PageViewDemoState extends State<PageViewDemo> {
late PageController _pageController;
int _currentPageIndex = 0;
@override
void initState() {
super.initState();
_pageController = PageController(
/// 關聯的 PageView 的初始頁的索引位置
initialPage: 0,
/// 是否需要保持 PageView 中的每個元素的狀態
keepPage: true,
/// PageView 中的每個元素佔用的頁空間的比例
viewportFraction: 1.0,
);
/// 通過 controller 監聽 PageView 的變化
_pageController.addListener(() {
/// 滾動的距離
double offset = _pageController.offset;
/// 索引位置（比如 1.5 代表第 3 個元素顯示了一半）
double? index = _pageController.page;
log("offset:$offset, index:$index");
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text("title")),
backgroundColor: Colors.orange,
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SizedBox(
height: 200,
/// 可以通過 PageView() 的 children 一個一個地指定 PageView 中的每個元素（初始化的時就會把所有元素都創建好）
/// 也可以通過 PageView.builder() 動態生成 PageView 中的每個元素（按需創建）
child: PageView.builder(
/// 顯示的索引位置發生變化時的回調
onPageChanged: (int index) {
log("onPageChanged:$index");
_currentPageIndex = index;
},
/// 滾動到邊緣時的物理效果
physics: const BouncingScrollPhysics(),
/// 滾動方向（horizontal 或 vertical）
scrollDirection: Axis.horizontal,
/// 關聯的 PageController
controller: _pageController,
/// 用於指定 PageView 中的元素數量
itemCount: 10,
/// 用於構造 PageView 中的每個元素
itemBuilder: (BuildContext context, int index) {
log("itemBuilder:$index");
return Image.asset(
"assets/son.jpg",
fit: BoxFit.fill,
);
},
),
),
MyButton(
child: const Text("滾動到下一頁"),
onPressed: () {
/// animateToPage() - 有動畫的方式跳轉到指定的頁
/// animateTo() - 有動畫的方式跳轉到指定的距離
/// jumpToPage() - 無動畫的方式跳轉到指定的頁
/// jumpTo() - 無動畫的方式跳轉到指定的距離
_pageController.animateToPage(
_currentPageIndex + 1,
curve: Curves.ease,
duration: const Duration(milliseconds: 500),
);
},
),
],
),
);
}
}