相当于 Android 的 ViewPager 效果。不过 PageView 还带有垂直方向的滚动。
PageView
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: null,
automaticallyImplyLeading: false,
title: Text(widget.title),
),
body: PageView(
scrollDirection: Axis.horizontal,
reverse: false,
controller: PageController(
initialPage: 0,
viewportFraction: 1,
keepPage: true,
),
physics:BouncingScrollPhysics(),
pageSnapping: true,
onPageChanged: (index) {
//监听事件
print('index=====$index');
},
children: <Widget>[
Container(
color: Colors.tealAccent,
child: Center(
child: Text(
'第1页',
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
),
),
Container(
color: Colors.greenAccent,
child: Center(
child: Text(
'第2页',
style: TextStyle(color: Colors.black, fontSize: 20.0),
),
),
),
Container(
color: Colors.deepOrange,
child: Center(
child: Text(
'第3页',
style: TextStyle(color: Colors.black, fontSize: 20.0),
),
),
)
],
),
);
}
}
- scrollDirection
滚动方向,分为 Axis.horizontal 和 Axis.vertical。
- reverse
反转，是否从最后一个开始算0
- controller
PageController 控制初始化第几个，占屏幕的范围。
- initialPage 初始化第一次默认在第几个。
- viewportFraction 占屏幕多少，1为占满整个屏幕
- keepPage
是否保存当前 Page 的状态，如果保存，下次回复对应保存的 page，initialPage被忽略，如果为 false 。下次总是从 initialPage 开始。
- physics
滚动的方式
- BouncingScrollPhysics 阻尼效果
- ClampingScrollPhysics 水波纹效果
- pageSnapping
是否具有回弹效果，默认为 true
- onPageChanged
监听事件
- children
具体子控件的布局
最后效果。左右可滑动
image.png
轮播图
在 Flutter 里面 可以 通过 Timer.periodic 来做定时器。所以上面代码加个定时器就可以做成轮播图了。代码如下：
class _MyHomePageState extends State<MyHomePage> {
PageController _pageController;
Timer _timer;
int _index = 0;
@override
void initState() {
super.initState();
_pageController = PageController(
initialPage: _index, //默认在第几个
viewportFraction: 1, // 占屏幕多少，1为占满整个屏幕
keepPage: true, //是否保存当前 Page 的状态，如果保存，下次回复保存的那个 page，initialPage被忽略，
//如果为 false 。下次总是从 initialPage 开始。
);
_timer = Timer.periodic(const Duration(seconds: 2),(timer){
_index++;
_pageController.animateToPage(
_index % 3,//跳转到的位置
duration: Duration(milliseconds: 16),//跳转的间隔时间
curve: Curves.fastOutSlowIn,//跳转动画
);
});
}
@override
void dispose() {
_pageController.dispose();
_timer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: null,
automaticallyImplyLeading: false,
title: Text(widget.title),
),
body: PageView(
scrollDirection: Axis.horizontal,
reverse: false,
controller: _pageController,
physics:BouncingScrollPhysics(),
pageSnapping: true,
onPageChanged: (index) {
print('index=====$index');
},
children: <Widget>[
Container(
color: Colors.tealAccent,
child: Center(
child: Text(
'第1页',
style: TextStyle(color: Colors.black, fontSize: 18.0),
),
),
),
Container(
color: Colors.greenAccent,
child: Center(
child: Text(
'第2页',
style: TextStyle(color: Colors.black, fontSize: 20.0),
),
),
),
Container(
color: Colors.deepOrange,
child: Center(
child: Text(
'第3页',
style: TextStyle(color: Colors.black, fontSize: 20.0),
),
),
)
],
),
);
}
}
在定时器回调里面，调用 PageController.animateToPage 就可以切换到指定的 Page 。
