flutter自定义分页器

已于 2022-04-17 17:07:36 修改
阅读量3.5k 收藏 2
点赞数 6
分类专栏： 笔记 flutter 文章标签： flutter 前端
于 2022-04-17 17:07:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_55986526/article/details/124231387
版权

使用flutter自定义一个分页器

最近在写flutter项目，项目刚好需要一个分页器，对数据进行分页处理，一开始想要在网上找有没有已经写好的插件，搜寻一会后还是想着自己写一个。

先看看效果图

在这里插入图片描述

思路
  1. 首先要准备一个盒子，装载分页数字。
  2. 其次要考虑数据总数量在一定范围内该如何进行分页比较合理，比如：展示的要有多少的页数，隐藏起来要有多少的页数，从而对盒子进行规划
  3. 并且当页数改变的时候，对盒子内的页码参数进行合适的变化
以上是我的简单思路，具体还是看看源码
  • 第一，因为分页器的内容需要时常改变，所以，要使用 StatefulWidget
    	class Pager extends StatefulWidget {
	  const Pager({Key? key}) : super(key: key);
	
	  @override
	  State<Pager> createState() => _PagerState();
	}
	
	class _PagerState extends State<Pager> {
	  @override
	  Widget build(BuildContext context) {
	    return Container();
	  }
	}
  • 第二，准备展示具体的页码参数，我的思路是根据页码生成对应的widget，所以存放页码的容器使用 list ，但是这个数组需要根据你需要在页面上展示多少的可见页码和隐藏页码来决定
    	class _PagerState extends State<Pager> {
	  List _list = [];  // 存放页码的数组
	  int _total = 10;  // 页码数量（总数据量/一页需要展示多少条数据）
	  int _pageIndex = 1;  // 当前页码
	  
	
	  /*
	      假如：
	        在一行上展示七个页码item，那么要对total进行分配，并且需要根据当前的页码来决定list里面页码的规划
	   */
	  void managePage(){
	    _list = [];  // 将页码数组制空
	    if(_total <= 1) {  // 当页码数量小于等于1时就不需要页码了，直接跳过，此时list为空数组
	      return;
	    }
	    if(_total <= 7) {  // 7：是我自己规定一行内展示的页码item数量，需要展示多少可以自己定义，当小于等于7时，直接进行展示这7个页码item
	      for(var i = 0; i < _total; i++) {
	        _list.add(i+1);
	      }
	    } else if(_pageIndex <= 4) {  // 当页码大于7后，则需要根据当前页码对有些页码进行隐藏
	      _list = [1,2,3,4,5, "...", _total];
	    } else if(_pageIndex > _total - 3) { // 以此类推
	      _list = [1,2, "...", _total - 3, _total - 2, _total - 1,  _total];
	    } else {   
	      _list = [1, "...", _pageIndex - 1, _pageIndex, _pageIndex + 1, "...", _total];
	    }
      // 页码制定好后，根据自己需求，加上前一页按钮，后一页按钮
	    _list.insert(0, "上一页");
	    _list.add("下一页");
	  }
		
	  @override
	  Widget build(BuildContext context) {
	    return Container();
	  }
	}
  • 第三，将页码展示在页面，在这里行内布局我使用 Row，里面的每个页码我用的容器 Container套入Text组件，样式可以自己根据项目需要定义
    	@override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: _list.mapIndexed((index, ele) {
          if(index == 0) {
            return GestureDetector(
              onTap: () {
                if(_pageIndex > 1) {
                  setState(() {
                    _pageIndex--;
                    // 改变页码在这里发送事件通知
                  });
                }
              },
              child: buildPagerItem(
                  child: ele
              ),
            );
          }
          if(index == _list.length - 1) {
            return GestureDetector(
              onTap: () {
                if(_pageIndex < _total) {
                  setState(() {
                    _pageIndex++;
                    // 改变页码在这里发送事件通知
                  });
                }
              },
              child: buildPagerItem(
                child: ele
              ),
            );
          }
          return GestureDetector(
            onTap: () {
              if(ele != "...") {
                setState(() {
                  if(_pageIndex != ele) {
                    _pageIndex = ele;
                    // 改变页码在这里发送事件通知
                  }
                });
              }
            },
            child: buildPagerItem(
                child: Text(
                  "$ele",
                  // 当前页码对应的组件的样式
                  style: ele == _pageIndex ? TextStyle() : TextStyle()
                )
            ),
          );
        }).toList(),
      ),
    );
  }


  // 在这里我对 build 里面的内容进行抽取
  Widget buildPagerItem({
    required Widget child
  }) {
    return Container(
      width: 100,
      height: 50,
      alignment: Alignment.center,
      decoration: BoxDecoration(),
      margin: EdgeInsets.symmetric(),
      child: child,
    );
  }

最后上全部源码

import 'package:flutter/material.dart';
import 'package:collection/collection.dart';

import 'package:dianying/core/extension/index.dart';

class Pager extends StatefulWidget {

  late TextStyle activeTextStyle;  // 当前页码的文本样式
  late Widget preWidget;  // 上一页的widget
  late Widget nextWidget; // 下一页的widget
  int total;  // 总页码数量
  late double containerWidth;  // 容器的宽度
  late MainAxisAlignment mainAxisAlignment;  // 页码横主轴对齐方式
  late TextStyle normalTextStyle;  // 其他页码的文本样式
  late double pagerItemWidth;  // 页码item的宽度
  late double pagerItemHeight; // 页码item的高度
  late BoxDecoration pagerItemDecoration;  // 页码item的样式
  ValueChanged pageChange;   // 页码改变的回调
  late EdgeInsetsGeometry pagerItemMargin;  // 页码item的边距

  Pager({
    Key? key,
    TextStyle? activeTextStyle,
    Widget? preWidget,
    Widget? nextWidget,
    required this.total,
    double? containerWidth,
    MainAxisAlignment? mainAxisAlignment,
    TextStyle? normalTextStyle,
    double? pagerItemWidth,
    double? pagerItemHeight,
    BoxDecoration? pagerItemDecoration,
    required this.pageChange,
    EdgeInsetsGeometry? pagerItemMargin
  }) :  activeTextStyle = activeTextStyle ?? TextStyle(color: Colors.white,
      fontSize: 14.px),
        preWidget = preWidget ?? Icon(Icons.arrow_left, color: Colors.red, size: 22.px),
        nextWidget = nextWidget ?? Icon(Icons.arrow_right, color: Colors.red, size: 22.px),
        containerWidth = containerWidth ?? double.infinity,
        mainAxisAlignment = mainAxisAlignment ?? MainAxisAlignment.spaceAround,
        normalTextStyle = normalTextStyle ?? TextStyle(color: Colors.red, fontSize: 14.px),
        pagerItemWidth = pagerItemWidth ?? 36.px,
        pagerItemHeight = pagerItemHeight ?? 30.px,
        pagerItemDecoration = pagerItemDecoration ?? BoxDecoration(color: Colors.black, borderRadius: BorderRadius.circular(3.px)),
        pagerItemMargin = pagerItemMargin ?? const EdgeInsets.all(0),
        super(key: key);

  @override
  State<Pager> createState() => _PagerState();
}

class _PagerState extends State<Pager> {
  int _pageIndex = 1;
  List _list = [];


  void manageList() {
    _list = [];
    if(widget.total <= 1) {
      return;
    }
    if(widget.total <= 7) {
      for(var i = 0; i < widget.total; i++) {
        _list.add(i+1);
      }
    } else if(_pageIndex <= 4) {
      _list = [1,2,3,4,5, "...", widget.total];
    } else if(_pageIndex > widget.total - 3) {
      _list = [1,2, "...", widget.total - 3, widget.total - 2, widget.total - 1,  widget.total];
    } else {
      _list = [1, "...", _pageIndex - 1, _pageIndex, _pageIndex + 1, "...", widget.total];
    }
    _list.insert(0, widget.preWidget);
    _list.add(widget.nextWidget);
  }

  @override
  Widget build(BuildContext context) {
    return buildContent();
  }


  Widget buildContent() {
    manageList();
    return Container(
      width: widget.containerWidth,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: widget.mainAxisAlignment,
        children: _list.mapIndexed((index, ele) {
          if(index == 0) {
            return GestureDetector(
              onTap: () {
                if(_pageIndex > 1) {
                  setState(() {
                    _pageIndex--;
                    widget.pageChange(_pageIndex);
                  });
                }
              },
              child: buildPagerItem(
                child: ele
              ),
            );
          }
          if(index == _list.length - 1) {
            return GestureDetector(
              onTap: () {
                if(_pageIndex < widget.total) {
                  setState(() {
                    _pageIndex++;
                    widget.pageChange(_pageIndex);
                  });
                }
              },
              child: buildPagerItem(
                child: ele
              ),
            );
          }
          return GestureDetector(
            onTap: () {
              if(ele != "...") {
                setState(() {
                  if(_pageIndex != ele) {
                    _pageIndex = ele;
                    widget.pageChange(_pageIndex);
                  }
                });
              }
            },
            child: buildPagerItem(
              child: Text(
                "$ele",
                style: ele == _pageIndex ? widget.activeTextStyle : widget.normalTextStyle,
              )
            ),
          );
        }).toList(),
      ),
    );
  }


  Widget buildPagerItem({
    required Widget child
  }) {
    return Container(
      width: widget.pagerItemWidth,
      height: widget.pagerItemHeight,
      alignment: Alignment.center,
      decoration: widget.pagerItemDecoration,
      margin: widget.pagerItemMargin,
      child: child,
    );
  }
}

如果感觉不错，点个赞再走吧！！！

感谢观看！！！

Mr-阿梓
关注
  • 6
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Flutter 自定义顶部导航栏（方法二）
01-08
文件结构： routes.dart import 'package:flutter/material.dart'; import '../pages/tabs.dart'; import '../pages/AppBarDemo.dart'; import '../pages/TabBarController.dart'; final routes = { '/': (context) => Tabs(), '/appBarDemo':(context)=>AppBarDemoPage(), '/tabBarController':(context)=>TabBarContro
Flutter 自定义顶部导航栏（方法一）
01-20
文件结构： 内容承接：https://blog.csdn.net/u013227399/article/details/103787189 main.dart import 'package:flutter/material.dart'; import 'routes/Routes.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(
Flutter 项目实战 实现分页加载图片的列表 十
最新发布
2401_83704125的博客
05-06 733
今天关于面试的分享就到这里，还是那句话，有些东西你不仅要懂，而且要能够很好地表达出来，能够让面试官认可你的理解，例如Handler机制，这个是面试必问之题。有些晦涩的点，或许它只活在面试当中，实际工作当中你压根不会用到它，但是你要知道它是什么东西。最后在这里小编分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。还有。
flutter 自定义card阴影
01-03
最近在用flutter写web程序，简直是炼狱模式。。然后遇到个需求，原本的Card阴影无法满足产品需求，需要像IOS 那种超级高大上的，似影非影的效果。。（简直分分钟想打死产品） 一开始，当然都是百度了，于是百度到了一个方法：BoxShadow！ 于是高高兴兴开干了，代码如下 嗯。。。看上去好像没啥毛病，Y轴方向偏移7，blurRadius：模糊延申14，spreadRadius：不模糊的不要延申，为0 跑到安卓的浏览器上 简直Perfect！！！完工交差。。。（just我以为） 看到测试淫笑的眼神，我就知道了自己的图样图森破，他拿着自己高大上的iPhone给我截了个图： WTF？？？
Flutter 自定义底部导航栏
01-07
文件结构： main.dart import 'package:flutter/material.dart'; import 'pages/tabs.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Tabs(), ); } } tabs.dart import 'package:flutte
Flutter自定义控件之图片裁剪框
01-10
Flutter自定义控件之图片裁剪框
flutter_novel:仿追书神器，具有仿真、滑动和滚动翻页、字体大小、行高、背景、目录等功能的Flutter 阅读APP
05-23
前言 如果想自己编译，建议flutter环境使用最新的stable分支（我目前使用的是stable分支的1.12.13+hotfix.5），由于项目中使用了较新的技术点，所以如果是老版本的环境应该会因为找不到类或者方法而报错。 另外……ios因为没设备，所以也不知道具体是否正常，讲道理应该没啥问题的。plugin，代码这块也是基本的flutter代码，应该没什么特殊的………… 本人也是在不断摸索学习flutter中，所以这个项目中存在的错误或者低性能部分，还请不吝提issue或者pr。 总之，欢迎pr、fork、star，或者在issue区中提出有意义的意见或者建议。 体验demo： Android： IOS： em,这个木有 注：部分书的章节内容显示为：加载出错，这个是因为网络问题，或者追书神器api并没返回内容导致的 顺便提一下： 多图流量警告！ 效果图 在优化上下了很大功夫的，注意看
用flutter实现分页加载和下拉刷新
hbws37的博客
12-12 711
itemCount: datalist.length + 1, // 加1是为了显示加载中的UI。// 刷新数据，将datalist清空后加载第一页。// 获取数据后填充datalist。
Flutter 组件抽取：分页加载列表控件（LoadListView）
zeqiao的博客
05-01 855
分页加载功能抽取，下拉刷新列表，上拉加载更多。
Flutter练习：实现自定义的分页指示器
weixin_44486516的博客
03-10 5144
在开发过程中往往会遇到需求是这样的，我们要实现的效果如图二所示。 项目中使用的轮播图插件是：
Flutter 分页功能表格控件
老孟Flutter
04-28 3808
老孟导读：前2天有读者问到是否有带分页功能的表格控件，今天分页功能的表格控件详细解析来来。 PaginatedDataTable PaginatedDataTable是一个带分页功能的DataTable，生成一批数据，项目中此一般通过服务器获取，定义model类： class User { User(this.name, this.age, this.sex); final Str...
Flutter 分页功能表格控件详细解析
08-19
主要介绍了Flutter 分页功能表格控件详细解析，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
flutter_paging:像android jetpack一样分页
05-27
flutter_paging 分页小部件。 解耦用户界面和数据。 注意：此插件仍在开发中。 是最欢迎的。 安装 首先，中将flutter_paging添加为。 包含的小部件 PagingView：基本分页视图。 PagingListView：ListView的快速实现支持分页。 KeyedDataSource KeyedDataSource是分页的核心。 尝试使用KeyedDataSource其他KeyedDataSource 注意：不要忘记调用dataSource.init() 例子 @override Widget build ( BuildContext context) { return Scaffold ( appBar : AppBar ( title : Text ( "Paging ListView" ),
Flutter自定义TabBar的Indicator.zip
03-02
Flutter自定义TabBar的Indicator 实现秒杀Tab效果
flutter flutter_swiper自定义指示器
热门推荐
王亟亟的博客
04-23 1万+
转载请注明出处：王亟亟的大牛之路 最近在做公司项目的一些模块迁移的尝试，然后在改Banner的时候发现官方并没有提供封装彻底的ViewPager控件，然后第三方里我选了 https://github.com/best-flutter/flutter_swiper 理由有以下几点 有人维护，且仍在继续开发 文档解释比较清晰 使用比较简便 满足了业务效果 官方的演示效果 设计稿长这样 可以...
flutter 自定义仿web风格Pagination 分页组件
qq_23404533的博客
04-19 498
flutter 表格table底部页码指示器table pager indicator
Flutter 上拉加载更多与分页功能实现
weixin_43800535的博客
02-24 1908
上拉加载更多与分页功能实现
flutter 自定义controller
02-24
Flutter中的自定义Controller是指可以控制和管理特定组件状态的类。通过自定义Controller，我们可以实现对组件的状态进行监听、更新和控制。 在Flutter中，常用的自定义Controller是StatefulWidget的Controller，也称为StateController。StateController通常包含一个State对象，用于管理组件的状态，并提供一些方法来更新状态和通知组件重新构建。 下面是一个简单的示例，展示了如何创建一个自定义的Controller来管理一个计数器的状态： ```dart class CounterController { int _count = 0; int get count => _count; void increment() { _count++; } } ``` 在上面的示例中，CounterController包含一个私有变量_count来保存计数器的值，并提供了一个公共方法increment来增加计数器的值。通过get方法count，我们可以获取当前计数器的值。 在使用自定义Controller时，通常需要将其与StatefulWidget配合使用。下面是一个使用CounterController的示例： ```dart class CounterWidget extends StatefulWidget { @override _CounterWidgetState createState() => _CounterWidgetState(); } class _CounterWidgetState extends State<CounterWidget> { final CounterController _controller = CounterController(); @override Widget build(BuildContext context) { return Column( children: [ Text('Count: ${_controller.count}'), RaisedButton( child: Text('Increment'), onPressed: () { setState(() { _controller.increment(); }); }, ), ], ); } } ``` 在上面的示例中，CounterWidget使用CounterController来管理计数器的状态。在build方法中，我们可以通过_controller.count获取当前计数器的值，并通过_controller.increment方法来增加计数器的值。当点击按钮时，我们调用setState方法来通知Flutter框架重新构建组件。 通过自定义Controller，我们可以更好地管理和控制组件的状态，使代码更加模块化和可维护。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值