Flutter 轮播图 设计与实现

于 2024-05-16 11:10:59 发布
阅读量244 收藏 4
点赞数 8
文章标签： flutter javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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),
        ),
      ),
    );
  }

}

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

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

某位不知名的爱先生
关注
  • 8
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flutter高手秘籍：打造流畅滑动体验，自制轮播图组件实战
奇妙的Bug之旅
05-30 36
在Flutter应用程序开发中，滑动事件是构建动态用户界面的关键元素之一，特别是在设计列表、卡片滚动、图像浏览等场景中。熟练掌握如何在Flutter中有效利用滑动事件，可以显著提升应用的交互性和用户体验。本文将从一位资深Flutter开发者的角度，深入探讨如何在Flutter应用中集成和自定义滑动事件，并通过一个完整的示例项目——创建一个基础的滑动轮播图组件，来展示其实现细节。
Flutter实现可循环轮播图效果
08-25
主要介绍了Flutter实现可循环轮播图效果，本文图文并茂通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
Flutter 实战开发-轮播图
流星雨的博客
09-02 6394
本文主要通过flutter实现轮播图功能，主要是基础使用，如有疑问可留言讨论 文章目录一、Swiper引入二、Swiper使用三、Swiper动效3.1、DEFAULT动效3.2、STACK动效3.3、TINDER动效3.4、CUSTOM动效三、Swiper其他配置 一、Swiper引入 轮播图我们使用三方库flutter_swiper，首先在pubspec.yaml中配置依赖 flutter_swiper : 1.1.6 然后拉取三方仓库 flutter packages get 二、.
2021年Flutter中使用flutter_swiper实现轮播图
码蝗的博客
03-24 530
1. 安装插件 配置flutter_swiper插件。 dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 # 配置轮播图插件 flutter_swiper: ^1.1.6 在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依.
flutter 轮播图
yinyiYi159的博客
07-24 438
引言：记录一下flutter的学习成果，今天来写flutter实现的轮播图 1，首先添加依赖 2.使用起来很简单 Swiper( itemCount: swiperDateList.length, itemBuilder: (BuildContext context, int index) { return ClipRRect( borderRa
Flutter轮播图
Purple_JJ的博客
03-25 1357
AndroidStudio Flutter 运行报错Error: Cannot run with sound null safety, because the following dependencies don’t support null safety 解决方法 Run --> Edit Configurations --> Add Additional Run args --> --no-sound-null-safety
Flutter 轮播图插件
01-13
综上所述，实现 Flutter 轮播图主要涉及选择合适的 Swiper 插件，理解其配置项，以及设计与之配合的数据模型。同时，合理利用网络接口和 JSON 解析可以确保轮播图数据的正确展示。在实际项目中，还要考虑到性能优化...
flutter 搭建首页框架 Scaffold 与 PageView 实现
11-17
接下来，`PageView` 是一个可以水平滑动的视图容器，通常用于实现多个页面间的滑动切换，常用于首页轮播图或者多页应用。`PageView` 可以自动处理滑动手势，并在用户滑动时平滑地过渡到下一个或上一个页面。 使用 `...
Flutter自定义实现神奇动效的卡片切换视图
08-10
在本文中，我们将深入探讨如何使用Flutter来实现一个自定义的、充满魔力的卡片切换视图。Flutter作为Google推出的跨平台UI工具包，以其高效、灵活和丰富的动画支持而备受开发者喜爱。JavaScript开发人员转向Flutter...
Android 毕业设计仿斗鱼 Flutter 设计（内附源码，下载即可）
02-01
Android 毕业设计仿斗鱼 Flutter 设计（内附源码，下载即可） 博客地址：https://blog.csdn.net/JasonXu94?type=blog 实现的功能 1. flutter重构的斗鱼直播APP 2. 首页、娱乐为Material组件；直播间、鱼吧为纯自定义...
flutter 轮播图动态加载网络图片的方法
08-25
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。这篇文章主要介绍了flutter 轮播图动态加载网络图片的方法 ,需要的朋友可以参考下
Flutter轮播图效果的实现步骤
08-18
主要介绍了Flutter轮播图效果的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
flutter实现仿boss直聘功能
01-20
3. **Material Design风格**：Flutter遵循Material Design设计规范，提供了许多预定义的组件，如`SliverAppBar`。在这个应用中，`SliverAppBar`被用来创建一个可扩展的头部，包含了标题和背景图片，通过`Flexible...
【flutter 轮播图】
AHekey的博客
02-28 437
flutter 轮播图1. 安装插件2. 引入依赖3. 完整示例 1. 安装插件 配置flutter_swiper插件。 dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 # 配置轮播图插件 flutter_swiper: ^1.1.6 在pubs
Flutter实现轮播图功能
最新发布
彬sir哥的博客
02-02 1187
轮播图
Flutter 轮播图（基础版）
weixin_45425105的博客
12-30 478
哈哈哈，女帝的身材绝了呀，做一个轮播图慢慢看，身材比例也太好吧，你们也赶紧收藏学起来吧~ 老规矩，先看图 （一）效果图 （二）效果实现 首先，我们要引入依赖，在pubspec.yml这个文件写入一个指令，看图 版本号可能会不同，给个网址自己去下~ https://pub.dev/packages/flutter_swiper 然后就是准备你喜欢的图片，开始画ui啦 话不多说，上代码：复制即可运行，你看我多懂你们，嘿嘿 import 'package:flutter/material.dart'; imp
Flutter 实现 「图片轮播」效果
油焖茄子 的博客
03-08 1145
Flutter 实现 「图片轮播」效果
flutter中实现轮播图
lqw200931116的博客
04-01 3332
flutter_swiper最强大的swiper, 多种布局方式，无限轮播，Android和IOS双端适配. 1、在pubspec.yaml引入flutter_swiper flutter_swiper: ^1.1.6 记得执行 flutter pub get 2、引用 import 'package:flutter_swiper/flutter_swiper.dart'; 3、使用 Swiper( itemBuilder: (BuildContext context,int .
在Flutter中，如何实现图片轮播切换
05-16
在Flutter中，可以使用`PageView`来实现图片轮播切换。以下是一个简单的示例代码： ```dart class ImageCarousel extends StatefulWidget { final List<String> imageUrls; ImageCarousel({required this.imageUrls}); @override _ImageCarouselState createState() => _ImageCarouselState(); } class _ImageCarouselState extends State<ImageCarousel> { final PageController _pageController = PageController(); int _currentPage = 0; @override void initState() { super.initState(); _pageController.addListener(() { setState(() { _currentPage = _pageController.page!.round(); }); }); } @override void dispose() { _pageController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Stack( children: [ PageView( controller: _pageController, children: widget.imageUrls .map((imageUrl) => Image.network( imageUrl, fit: BoxFit.cover, )) .toList(), ), Positioned( bottom: 10, left: 0, right: 0, child: Row( mainAxisAlignment: MainAxisAlignment.center, children: widget.imageUrls.map((imageUrl) { final index = widget.imageUrls.indexOf(imageUrl); return Padding( padding: const EdgeInsets.symmetric(horizontal: 4), child: Container( width: 8, height: 8, decoration: BoxDecoration( shape: BoxShape.circle, color: _currentPage == index ? Colors.white : Colors.grey, ), ), ); }).toList(), ), ), ], ); } } ``` 在这个示例中，`ImageCarousel`是一个`StatefulWidget`，它接受一个`imageUrls`参数，该参数是一个包含图片URL的字符串列表。`_ImageCarouselState`中使用`PageView`来显示所有图片，同时使用`PageController`来跟踪当前页面。 在`initState`方法中，我们添加了一个监听器来更新`_currentPage`变量，这个变量用于显示当前选中的页面。在`build`方法中，我们使用`Stack`将`PageView`和指示器放在一起。指示器是一个包含多个圆点的`Row`，其中选中的页面对应的圆点是白色的，其余的圆点是灰色的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值