Flutter3.19.x实战仿小红书企业级APP，100万人学
第三十三课 Flutter PageView轮播图、代码封装
PageView 实现一个无限轮播的轮播图
List<String> list = const [
"https://mall.flutterschool.cn/images/xhs/1.png",
"https://mall.flutterschool.cn/images/xhs/2.png",
"https://mall.flutterschool.cn/images/xhs/3.png",
];
@override
Widget build(BuildContext context) {
return SizedBox(
height: 250,
width: double.infinity,
child: Stack(
children: [
//轮播图片
swiper(),
//指示器
indicatorNum(),
//指示器
indicatorCircle()
],
),
);
}
Widget swiper() {
//懒加载方式构建
return PageView.builder(
//轮播个数 无限轮播
itemCount: widget.list.length * 10000,
itemBuilder: (context, index) {
print(index);
return ImagesPage(
src: widget.list[index % widget.list.length],
);
},
//PageView滑动时回调
onPageChanged: (index) {
setState(() {
currentIndex = index % widget.list.length;
});
},
);
}
//指示器
Widget indicatorNum() {
return Positioned(
bottom: 20,
right: 20,
child: Container(
//内边距
padding: const EdgeInsets.only(left: 8, right: 8, top: 2, bottom: 2),
//圆角边框
decoration: const BoxDecoration(
//背景
color: Colors.black,
//边框圆角
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Text(
"${currentIndex + 1}/${widget.list.length}",
style: const TextStyle(color: Colors.white),
),
),
);
}
//指示器
Widget indicatorCircle() {
return Positioned(
left: 0,
right: 0,
bottom: 6,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List.generate(widget.list.length, (index) {
return Container(
margin: const EdgeInsets.all(8),
width: 10,
height: 10,
decoration: BoxDecoration(
color: currentIndex == index ? Colors.blue : Colors.white,
shape: BoxShape.circle //圆形
// borderRadius: BorderRadius.circular(5) //圆形
),
);
}).toList(),
),
);
}
}
温馨提示: 本文由Flutter教程网推荐，转载请保留链接: https://www.flutterschool.cn/flutter/58.html
