使用flutter开发一个简单的轮播图带指示器的组件

本文主要是介绍使用flutter开发一个简单的轮播图带指示器的组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

使用PageView开发一个带指示器的轮播图组件，当轮播图切换的时候，指示器也会跟着切换，切换到当前轮播图所在的索引时，指示器的背景色会变成蓝色，否则是灰色。使用了一个curIndex变量来记录当前激活的轮播图索引。并使用Stack组件来实现定位布局。

组件代码：

import 'package:flutter/material.dart';// 轮播图
class Lunbo extends StatefulWidget {const Lunbo({super.key});@overrideState<Lunbo> createState() => _LunboState();
}class _LunboState extends State<Lunbo> {// 定义轮播图列表List<Widget> imgList = [];// 记录一下当前图片的索引，激活指示器背景色var curIndex = 0;void handle = (int cur) {print("handle函数");};@overridevoid initState() {// TODO: implement initStatevar imgUrls = ["https://img-blog.csdnimg.cn/img_convert/b723ea01d277dac4926a936f9b40862c.jpeg","https://img-blog.csdnimg.cn/img_convert/d794e0b76460ea037fc707b01bb1d703.jpeg","https://img-blog.csdnimg.cn/img_convert/f90cd009d24e58857a135cfcd44fe993.jpeg"];// 图片列表初始化for (int i = 0; i < imgUrls.length; i++) {imgList.add(Image.network(imgUrls[i],fit: BoxFit.fill,));}super.initState();}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('轮播图')),body: Container(// width: double.infinity,height: 200,child: Stack(children: [PageView(scrollDirection: Axis.horizontal,// reverse: true,children: imgList,onPageChanged: (index) {print("轮播图切换了: ${index}");setState(() {curIndex = index;});},),Positioned(left: 0,right: 0,bottom: 2,child: Row(mainAxisAlignment: MainAxisAlignment.center,children: List.generate(3, (index) {return Container(width: 20,alignment: Alignment.center,decoration: BoxDecoration(shape: BoxShape.circle,color:curIndex == index ? Colors.blue : Colors.grey),child: Text("$index",style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),),);}).toList(),))],),));}
}

这篇关于使用flutter开发一个简单的轮播图带指示器的组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---