flutter 轮播图Swiper组件

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
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用*标注