代码已经封装好,直接用即可
int _total = 5;
//当前显示的页数
int _current = 1;
//计时器
Timer _timer;
//轮播控制器
PageController _pageController;
final List<String> imageList = [ImagePath.card1,ImagePath.card2,ImagePath.card3,ImagePath.card4,ImagePath.card5]; //图片
///轮播的时间
final Duration loopDuration = const Duration(seconds: 3);
@override
void initState() {
super.initState();
//轮播图个数
_total = imageList.length;
//轮播控制器
_pageController = new PageController(initialPage: 5000);
}
@override
void dispose(){
_timer.cancel();
super.dispose();
}
//定义开始轮播的方法
void startLoopFunction() {
//定时器
_timer = Timer.periodic(loopDuration, (timer) {
//滑动到下一页
_pageController.nextPage(
curve: Curves.linear,
duration: Duration(
milliseconds: 200,
),
);
});
}
//定义停止轮播的方法
void stopLoopFunction() {
if (_timer.isActive) {
_timer.cancel();
}
}
Stack buildStack() {
return Stack(
children: [
//第一层 轮播
Positioned.fill(
child: PageView.builder(
//控制器
controller: _pageController,
//总页数
itemCount: 10000,
//滑动时回调 value 当前显示的页面
onPageChanged: (value) {
// setState(() {
// _current = value % imageList.length + 1;
// });
_current = value % imageList.length + 1;
print(_current);
},
itemBuilder: (BuildContext context, int index) {
String image = imageList[index % imageList.length];
return Image.asset(
image,
fit: BoxFit.fill,
);
},
),
),
//第二层 指示器
Positioned(
right: 14,
bottom: 14,
child: buildContainer(),
),
],
);
}
Container buildContainer() {
return Container(
alignment: Alignment.center,
width: 50,
height: 24,
decoration: BoxDecoration(
color: Colors.grey[200].withOpacity(0.5),
//设置圆角
borderRadius: BorderRadius.all(Radius.circular(12))),
child: Text(
"$_current/$_total",
textAlign: TextAlign.center,
),
);
}
Container shuffingFigure(){
//轮播 图
return Container(
color: Colors.white,
height: 100,
width: 100,
child: GestureDetector(
//手指按下的回调
onTapDown: (TapDownDetails details) {
// LogUtils.e("手指按下,停止轮播");
stopLoopFunction();
},
//手指抬起的回调
onTap: () {
// LogUtils.e("手指抬起,开始轮播");
startLoopFunction();
},
//手指按下后滑动移出的回调
onTapCancel: () {
// LogUtils.e("手指移出,开始轮播");
startLoopFunction();
},
child: buildStack(),
),
);
}
把shuffingFigure这个容器镶嵌到你的页面上即可