Flutter 轮播图 设计与实现

于 2024-05-16 11:10:59 发布
阅读量534 收藏 4
点赞数 8
文章标签： flutter javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wenyun936/article/details/138952325
版权

flutter 轮播图采用 pageView 进行实现其中内置参数可以自定义图片样式以及轮播图切换样式

代码模块

下方展示imageList 中数据均来自百度 

import 'dart:async';

import 'package:flutter/material.dart';

class CarouselBuild extends StatefulWidget {
  const CarouselBuild({super.key});

  @override
  State<CarouselBuild> createState() => _CarouselBuildState();
}

class _CarouselBuildState extends State<CarouselBuild> {

  final PageController _pageController = PageController();

  late Timer timer;

  late TabController _controller;

  late double _currPageValue = 0.0;

  //缩放系数
  final double _scaleFactor = .8;

  //view page height
  final double _height = 230.0;

  /// 轮播图数组
  late List<String> imageList = [
    'https://img0.baidu.com/it/u=96006887,2309821635&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=223',
    'https://img1.baidu.com/it/u=1022852233,3129210770&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=206',
    'https://img1.baidu.com/it/u=419280070,4243981332&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=203',
    'https://img1.baidu.com/it/u=2629135336,3120832498&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=206',
    'https://img0.baidu.com/it/u=3470022421,1242306653&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=206',
    'https://img1.baidu.com/it/u=762285736,3210433077&fm=253&fmt=auto&app=138&f=JPEG?w=700&h=292',
    'https://img0.baidu.com/it/u=1248541803,2421027931&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=168',
    'https://img1.baidu.com/it/u=2881279315,499379760&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=250',
  ];

  @override
  void initState() {
    super.initState();
    // 启动计时器，每隔2秒滚动一次
    _pageController.addListener(() {
      setState(() {
        _currPageValue = _pageController.page!;
      });
    });
    timer = Timer.periodic(const Duration(seconds: 3), (timer) {
      _pageController.nextPage(
        duration: const Duration(milliseconds: 300),
        curve: Curves.ease,
      );
    });
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _pageController,
      scrollDirection: Axis.horizontal,
      itemCount: 10000,
      itemBuilder: (BuildContext context, int index) {
        return _carouselBuild(context,index);
      },
    );
  }

  /// 轮播图模块
  Widget _carouselBuild(BuildContext context, int index) {
    Matrix4 matrix4 = Matrix4.identity();
    if (index == _currPageValue.floor()) {
      //当前的 item
      var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() + 1) {
      //右边的 item
      var currScale =
          _scaleFactor + (_currPageValue - index + 1) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() - 1) {
      //左边
      var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
      var currTrans = _height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else {
      //其他，不在屏幕显示的 item
      matrix4 = Matrix4.diagonal3Values(1.0, _scaleFactor, 1.0)
        ..setTranslationRaw(0.0, _height * (1 - _scaleFactor) / 2, 0.0);
    }
    return Transform(
      transform: matrix4,
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: NetworkImage(imageList[index % 2]), fit: BoxFit.fill),
        ),
      ),
    );
  }

}

上述为完整代码其中需要注意的是每一次图片的切换都会重新build整个widget 所以我们在实现轮播图功能时需要将整个模块在一个单独的widget中实现、否则若是当前widget中涉及到接口的请求时将会持续请求

当然上述代码可以通过组件的方式去实现

我们需要将轮播图切换时间、轮播图数组、图片大小通过参数的新式进行传递如下列代码所示

import 'dart:async';

import 'package:flutter/material.dart';

class CarouselBuild extends StatefulWidget {
/// 轮播图数组
final List<String> imageList;

/// 图片切换时间
final int? changeTime;

/// 轮播图占位大小
final double? height;

  const CarouselBuild({
    super.key,
    required this.imageList,
    this.changeTime = 2,
    this.height = 250,
 });

  @override
  State<CarouselBuild> createState() => _CarouselBuildState();
}

class _CarouselBuildState extends State<CarouselBuild> {

  final PageController _pageController = PageController();

  late Timer timer;

  late TabController _controller;

  late double _currPageValue = 0.0;

  //缩放系数
  final double _scaleFactor = 0.8;

  @override
  void initState() {
    super.initState();
    // 启动计时器，每隔2秒滚动一次
    _pageController.addListener(() {
      setState(() {
        _currPageValue = _pageController.page!;
      });
    });
    timer = Timer.periodic(Duration(seconds: widget.changeTime), (timer) {
      _pageController.nextPage(
        duration: const Duration(milliseconds: widget.changeTime * 100),
        curve: Curves.ease,
      );
    });
  }

  @override
  void dispose() {
    super.dispose();
    _pageController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      controller: _pageController,
      scrollDirection: Axis.horizontal,
      itemCount: 10000,
      itemBuilder: (BuildContext context, int index) {
        return _carouselBuild(context,index);
      },
    );
  }

  /// 轮播图模块
  Widget _carouselBuild(BuildContext context, int index) {
    Matrix4 matrix4 = Matrix4.identity();
    if (index == _currPageValue.floor()) {
      //当前的 item
      var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
      var currTrans = widget.height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() + 1) {
      //右边的 item
      var currScale =
          _scaleFactor + (_currPageValue - index + 1) * (1 - _scaleFactor);
      var currTrans = widget.height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else if (index == _currPageValue.floor() - 1) {
      //左边
      var currScale = 1 - (_currPageValue - index) * (1 - _scaleFactor);
      var currTrans = widget.height * (1 - currScale) / 2;
      matrix4 = Matrix4.diagonal3Values(1.0, currScale, 1.0)
        ..setTranslationRaw(0.0, currTrans, 0.0);
    } else {
      //其他，不在屏幕显示的 item
      matrix4 = Matrix4.diagonal3Values(1.0, _scaleFactor, 1.0)
        ..setTranslationRaw(0.0, widget.height * (1 - _scaleFactor) / 2, 0.0);
    }
    return Transform(
      transform: matrix4,
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
              image: NetworkImage(widget.imageList[index % 2]), fit: BoxFit.fill),
        ),
      ),
    );
  }

}

上述代码通用性可能有点差  但是有需要的可以自行更换内置参数

大佬路过请斧正[抱拳][抱拳][抱拳][抱拳]

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值