Flutter PageView 实现的自动轮播图效果 Timer实现的自动轮播效果。
本Demo实现的效果如下:
![87e84ebb1beb483b5b91dd5dc72f58ad.gif](https://i-blog.csdnimg.cn/blog_migrate/cb3a6d5d09fd62cb11e9c14124ad45a3.gif)
页面的主体使用 Scaffold 来搭建,代码如下:
class Homepage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _HomepageState();
}
}
class _HomepageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("轮播图"),
),
body: Container(
child: buildBanner(),
),
);
}
... ...
}
通过层叠布局 Stack 将轮播图与索引指示器组合在一起,代码如下:
Widget buildBanner() {
return Container(
height: 200,
width: double.infinity,
child: Stack(
children: [
//轮播图片
buildBannerWidget(),
//指示器
buildTipsWidget(),
],
),
);
}
轮播的图片是使用 PageView 来装载,代码如下:
buildBannerWidget() {
//懒加载方式构建
return PageView.builder(
//构建每一个子Item的布局
itemBuilder: (BuildContext context, int index) {
return buildPageViewItemWidget(index);
},
//控制器
controller: _pageController,
//轮播个数 无限轮播 ??
itemCount: imageList.length * 10000,
//PageView滑动时回调
onPageChanged: (int index) {
setState(() {
currentIndex = index;
});
},
);
}
PageView 中构建的每一个子Item 只是一个图片,代码如下:
//轮播显示图片
buildPageViewItemWidget(int index) {
return Image.asset(
imageList[index % imageList.length],
fit: BoxFit.fill,
);
}
//指示器
buildTipsWidget() {
return Positioned(
bottom: 20,
right: 20,
child: Container(
//内边距
padding: EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2),
//圆角边框
decoration: BoxDecoration(
//背景
color: Colors.white,
//边框圆角
borderRadius: BorderRadius.all(Radius.circular(10))),
child:
Text("${currentIndex % imageList.length + 1}/${imageList.length}"),
),
);
}
在这里需要初始化的数据如下:
//轮播图 PageView 使用的控制器
PageController _pageController;
//定时器自动轮播
Timer _timer;
//本地资源图片
List<String> imageList = [
"images/banner1.webp",
"images/banner2.webp",
"images/banner3.webp",
"images/banner4.webp",
];
//当前显示的索引
int currentIndex = 1000;
![8eedc6f15171e500ee853b3859365509.png](https://i-blog.csdnimg.cn/blog_migrate/fb65ac7c70f51938a395a7bc828c6544.jpeg)
定时器 Timer 的创建与销毁 代码如下:
@override
void initState() {
super.initState();
//初始化控制器
// initialPage 为初始化显示的子Item
_pageController = new PageController(initialPage: currentIndex);
///当前页面绘制完第一帧后回调
WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
startTimer();
});
}
@override
void dispose() {
super.dispose();
_timer.cancel();
}
定时器的轮播 触发PageView的自动切换,代码如下:
void startTimer() {
//间隔两秒时间
_timer = new Timer.periodic(Duration(milliseconds: 2000), (value) {
print("定时器");
currentIndex++;
//触发轮播切换
_pageController.animateToPage(currentIndex,
duration: Duration(milliseconds: 200), curve: Curves.ease);
//刷新
setState(() {
});
});
}
以小编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的
完整源码在这里
![07123f5c3fc73fd1b1b59971e6d9a75e.png](https://i-blog.csdnimg.cn/blog_migrate/eb724d69a8417764008d889c3cf9801b.png)
当然以小编的性格,肯定是要有视频录制的,点击这里查看,有兴趣 你可以关注一下 西瓜视频 — 早起的年轻人