flutter 轮播图Swiper组件

import 'dart:async'; import 'package:flutter/material.dart'; /* 轮播图组件 */ //使用组件方式 ImgSwiper(arrList: arrList) //轮播图 class ImgSwiper extends StatefulWidget { final List arrList; //定义接收值 const ImgSwiper({super.key, required this.arrList}); //必须 this. 方式 @override State<ImgSwiper> createState() => _ImgSwiperState(); } class _ImgSwiperState extends State<ImgSwiper> { int intTap = 0; @override Widget build(BuildContext context) { final size = MediaQuery.of(context).size; //获取屏幕 (使用方式 size.xxx) // 定时设置 自动滚动 seconds 5秒钟更换一次 var xTimer = Timer(const Duration(seconds: 5), () { intTap++; if (intTap >= widget.arrList.length) { intTap = 0; } setState(() { intTap = intTap; }); }); return Stack( children: [ Container( width: size.width, height: (size.width / 2.3), decoration: const BoxDecoration( color: Color.fromARGB(123, 225, 225, 235), ), clipBehavior: Clip.hardEdge, //超出部分,可裁剪 //使用轮播图组件 builde循环 child: PageView.builder( //轮播图滚动触发 onPageChanged: (index) { xTimer.cancel(); //手指滚动触发 关闭自动滚动 //衔接滚动 if (intTap >= widget.arrList.length) { intTap = 0; } else { intTap = index % widget.arrList.length; } setState(() { intTap = intTap; }); }, itemBuilder: (context, index) { return Image.network(widget.arrList[intTap]["src"]!, fit: BoxFit.cover); }, ), ), //浮动 Positioned( right: 1, bottom: -5, // 标签 child: Container( padding: const EdgeInsets.all(10), alignment: Alignment.center, //模块居中 //模块样式 decoration: const BoxDecoration( color: Color.fromARGB(100, 238, 241, 245), //设置四周圆角 borderRadius: BorderRadius.only( topLeft: Radius.circular(30), ), ), child: Text( "${intTap + 1}/${widget.arrList.length}", //显示数字 // Text标签文字样式 style: const TextStyle( color: Color(0xffffffff), fontWeight: FontWeight.bold, //字体变粗 fontStyle: FontStyle.italic, //字体倾斜, ), ), ), ), ], ); } }
36 Views