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

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

组件代码:

Dart 复制代码
import 'package:flutter/material.dart';

// 轮播图
class Lunbo extends StatefulWidget {
  const Lunbo({super.key});

  @override
  State<Lunbo> createState() => _LunboState();
}

class _LunboState extends State<Lunbo> {
  // 定义轮播图列表
  List<Widget> imgList = [];

  // 记录一下当前图片的索引,激活指示器背景色
  var curIndex = 0;

  void handle = (int cur) {
    print("handle函数");
  };

  @override
  void initState() {
    // TODO: implement initState
    var 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();
  }

  @override
  Widget 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(),
                  ))
            ],
          ),
        ));
  }
}
相关推荐
峥无6 分钟前
HTML 零基础入门到实战:从骨架到页面的完整指南
前端·html
南囝coding13 分钟前
《独立开发者精选工具》
前端·后端·开源
IT_陈寒16 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
艾小码36 分钟前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..1 小时前
ES6是什么
前端·javascript·es6
Jammingpro3 小时前
【Vue专题】前端JS基础Part1(含模版字符串、解构赋值、变量常量与对象)
前端·javascript·vue.js
jiangzhihao05156 小时前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
软件技术NINI9 小时前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
mapbar_front10 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
quweiie10 小时前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui