首页 > 其他分享 >Flutter 使用PageView 自定义无限轮播

Flutter 使用PageView 自定义无限轮播

时间:2023-12-20 16:45:46浏览次数:38  
标签:index PageView pageController 轮播 自定义 int items widget length

import 'package:flutter/material.dart';

int _getRealIndex(int index, int length) {
  return index >= length ? index % length : index;
}

class InfinitySlider extends StatefulWidget {
  final int initialPage;
  final List<Widget> items;
  final double height;
  final PageController pageController;

  InfinitySlider({
    Key? key,
    required this.items,
    this.height = 10,
    this.initialPage = 0,
  })  : pageController =
            PageController(initialPage: items.length + initialPage),
        assert(items.isNotEmpty),
        super(key: key);

  @override
  State<InfinitySlider> createState() => _InfinitySliderState();
}

class _InfinitySliderState extends State<InfinitySlider> {
  int length = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      length = widget.items.length;
    });
    widget.pageController.addListener(pageListener);
  }

  void pageListener() {
    double mediaWidth = MediaQuery.of(context).size.width;
    double page = widget.pageController.page as double;
    if (page == 0 || page >= (length * 2)) {
      double pixels = mediaWidth * (length + page % length);
      widget.pageController.position.setPixels(pixels);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: widget.height,
          child: PageView.builder(
            itemBuilder: (BuildContext context, int i) {
              final int index = _getRealIndex(i, length);
              return widget.items[index];
            },
            controller: widget.pageController,
          ),
        ),
      ],
    );
  }
}

标签:index,PageView,pageController,轮播,自定义,int,items,widget,length
From: https://www.cnblogs.com/angelwgh/p/17916921.html

相关文章

  • 秦疆的Java课程笔记:79 异常 自定义异常及经验小结
    使用Java内置的异常类可以描述在编程时出现的大部分异常情况。除此之外,用户还可以自定义异常。(秦疆老师:用的不多,但开源框架或者大型系统会用到。)用户自定义异常类,只需要继承Exception类即可。自定义异常类的步骤:创建自定义异常类在方法中通过throw关键字抛出异常对象......
  • Postgresql中PL/pgSQL的游标、自定义函数、存储过程的使用
    场景Postgresql中PL/pgSQL代码块的语法与使用-声明与赋值、IF语句、CASE语句、循环语句:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/135090263上面讲了基本语法,下面记录游标、自定义函数、存储过程的使用。注:博客:https://blog.csdn.net/badao_liumang_qizhi......
  • SpringBoot入门三十四,自定义Springboot Starter
    1.前言SpringBootStarter是一种用于简化SpringBoot应用程序配置的机制。通过自定义Starter,我们可以将一组相关的配置、依赖和自动配置打包成一个可重用的模块,使得其他开发者可以轻松地集成和使用。本篇文章将引导你创建一个简单的自定义SpringBootStarter,并演示如何在应用程序......
  • Qt自定义GridView从显示单个到九宫格
    一、概述由于测试OpenCV的需要自定义一个可变的用于显示图片的GridView,从显示单张图片到9张图片。效果图如下:这个GridView目前只是自己使用,还有瑕疵,这里仅提供一个可行性的思路,有需要可以自行扩展。二、代码示例1.自定义GridView--->VariableGridView.h/Vari......
  • C++ Qt开发:QItemDelegate 自定义代理组件
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QStyledItemDelegate自定义代理组件的常用方法及灵活运用。在Qt中,QStyledItemDelegate类是用于......
  • 在Mapbox-gl-js中添加自定义图层
    在Mapbox-gl-js中添加自定义图层前言一、制作geojson地图二、使用Tippecanoe将geojson转换成vectortile(.pbf)文件三、使用mapbox-gl-js显示三、Mapbox-gl-js中根据矢量数据的属性过滤显示前言本文说明如何制作自定义的地图数据,并使用mapbox-gl-js进行显示一、制作geoj......
  • Unreal入门,开灯,自定义事件
    1.创建一个点光源作为灯新建一个基于Actor的蓝图添加一个StaticMesh作为灯的外观将StaticMesh拖放到DefaultSceneRoot作为根节点添加点光源将地图的平行光调暗将刚创建的灯拖放到地图2.新建一个基于Actor的开关设置一个StaticMesh并拖放到覆盖根节点设置碰撞为......
  • uniGUI学习之自定义Hint(74)
    默认Hint样式 procedureTMainForm.UniFormShow(Sender:TObject);vari:Integer;beginfori:=0toSelf.ControlCount-1dobeginwithTUniFormControl(Self.Controls[i])dobeginifHint<>''thenbeginSh......
  • day17 基于Prometheus的HPA自动伸缩 -Prometheus黑盒监控-自定义资源接入监控系统 (7.
    一、基于Prometheus的HPA自动伸缩1、背景Kubernetes集群规模大、动态变化快,而且容器化应用部署和服务治理机制的普及,传统的基础设施监控方式已经无法满足Kubernetes集群的监控需求。需要使用专门针对Kubernetes集群设计的监控工具来监控集群的状态和服务质量。Prometheus则......
  • Spring Boot学习随笔- 实现AOP(JoinPoint、ProceedingJoinPoint、自定义注解类实现切面
    学习视频:【编程不良人】2021年SpringBoot最新最全教程第十一章、AOP11.1为什么要使用AOP问题现有业务层开发存在问题额外功能代码存在大量冗余每个方法都需要书写一遍额外功能代码不利于项目维护Spring中的AOPAOP:Aspect切面+Oriented面向Programmaing......