flutter开发技巧自定页面指示器PageIndicator详解

目录
  • 一、来源
  • 二、效果
  • 三、源码实现
    • 1、flutter_swiper_null_safety 使用示例:
    • 2、PageIndicatorWidget 指示器源码:
  • 三、总结

一、来源

项目中遇到多个需要自定义轮播图指示器的需求,封装成基础组件方便复用;

原理是通过 ValueListenableBuilder 实时监听轮播图的当前索引,然后更新指示器组件,达到最终效果;

二、效果

三、源码实现

1、flutter_swiper_null_safety 使用示例:

import 'package:flutter/material.dart';
import 'package:flutter_swiper_null_safety/flutter_swiper_null_safety.dart';
import 'package:flutter_templet_project/R.dart';
import 'package:flutter_templet_project/basicWidget/page_indicator_widget.dart';
import 'package:flutter_templet_project/extension/buildContext_extension.dart';
class FlutterSwiperIndicatorDemo extends StatefulWidget {
  FlutterSwiperIndicatorDemo({ Key? key, this.title}) : super(key: key);
  final String? title;
  @override
  _FlutterSwiperIndicatorDemoState createState() => _FlutterSwiperIndicatorDemoState();
}
class _FlutterSwiperIndicatorDemoState extends State<FlutterSwiperIndicatorDemo> {
  ValueNotifier<int> currentIndex = ValueNotifier(0);
  BorderRadius borderRadius = BorderRadius.all(Radius.circular(8));
  final items = R.imgUrls;//图片链接数组
  @override
  Widget build(BuildContext context) {
    dynamic arguments = ModalRoute.of(context)!.settings.arguments;
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title ?? "$widget"),
        ),
        body: _buildSwiper()
    );
  }
  ///创建子项
  _buildItem(context, index) {
    final imgUrl = items[index];
    return InkWell(
      onTap: () => print(index),
      child: Container(
        padding: EdgeInsets.only(bottom: 0), //为了显示阴影
        child: ClipRRect(
          borderRadius: this.borderRadius,
          child: Stack(
            alignment: Alignment.center,
            fit: StackFit.expand,
            children: [
              FadeInImage(
                placeholder: AssetImage('images/img_placeholder.png',),
                image: NetworkImage(imgUrl),
                fit: BoxFit.cover,
              ),
            ],
          ),
        ),
      ),
    );
  }
  _buildSwiper() {
    return Container(
      height: 200,
      child: ClipRRect(
          borderRadius: this.borderRadius,
          child: Stack(
            children: [
              Swiper(
                itemBuilder: (context, index) => _buildItem(context, index),
                // indicatorLayout: PageIndicatorLayout.COLOR,
                autoplay: this.items.length > 1,
                loop: this.items.length > 1,
                itemCount: this.items.length,
                // pagination: this.items.length <= 1 ? null : SwiperPagination(),
                // control: SwiperControl(),
                // itemWidth: 200,
                // viewportFraction: 0.6,
                onIndexChanged: (index){
                  currentIndex.value = index;
                }
              ),
              // if (this.items.length > 1) buildPageIndicator(),
              if (this.items.length > 1) PageIndicatorWidget(
                currentIndex: currentIndex,
                itemCount: this.items.length,
                itemSize: Size(context.screenSize.width/ 4 / this.items.length, 2),
                // itemBuilder: (isSelected, itemSize) {
                //   return Container(
                //     width: itemSize.width,
                //     height: itemSize.height,
                //     color: isSelected ? Colors.red : Colors.green,
                //   );
                // },
              )
            ],
          )
      ),
    );
  }

2、PageIndicatorWidget 指示器源码:

import 'package:flutter/material.dart';
typedef PageIndicatorItemWidgetBuilder = Widget Function(bool isSelected, Size itemSize);
/// 轮播图指示器
class PageIndicatorWidget extends StatelessWidget {
  PageIndicatorWidget({
    Key? key,
    this.margin = const EdgeInsets.only(bottom: 10),
    required this.currentPage,
    required this.itemCount,
    this.normalColor = const Color(0x25ffffff),
    this.selectedColor = Colors.white,
    this.itemSize = const Size(8, 2),
    this.itemBuilder,
    this.hidesForSinglePage = true
  }) : super(key: key);
  /// 当前页面索引
  ValueNotifier<int> currentPage;
  EdgeInsetsGeometry? margin;
  /// item数量
  int itemCount;
  /// 每个item尺寸(最好用固定宽度除以个数,避免总宽度溢出)
  Size itemSize;
  /// 自定义每个item
  PageIndicatorItemWidgetBuilder? itemBuilder;
  /// 默认颜色
  Color? normalColor;
  /// 选中颜色
  Color? selectedColor;
  /// 单页隐藏
  bool hidesForSinglePage;
  @override
  Widget build(BuildContext context) {
    if (this.hidesForSinglePage && this.itemCount == 1) {
      return SizedBox();
    }
    return buildPageIndicator();
  }
  Widget buildPageIndicator() {
    return Container(
      margin: this.margin,
      child: Align(
        alignment: Alignment.bottomCenter,
        child: ValueListenableBuilder(
          valueListenable: this.currentPage,
          builder: (BuildContext context, dynamic value, Widget? child) {
            return Row(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.start,
              children: buildPageIndicatorItem(
                currentIndex: this.currentPage.value,
                normalColor: this.normalColor,
                selectedColor: this.selectedColor,
              ),
            );
          },
        ),
      ),
    );
  }
  List<Widget> buildPageIndicatorItem({
    currentIndex: 0,
    normalColor: const Color(0x25ffffff),
    selectedColor: Colors.white,
  }) {
    List<Widget> list = List.generate(this.itemCount, (index) {
      return this.itemBuilder != null ? this.itemBuilder!(currentIndex == index, this.itemSize) : ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(1)),
        child: Container(
          width: this.itemSize.width,
          height: this.itemSize.height,
          color: currentIndex == index ? selectedColor : normalColor,
        ),
      );
    });
    return list;
  }
}

三、总结

此组件封装也秉承最简实现,不超过百行代码。开发工作中,如果我们发现最佳实践,即使它很小,也需要记录下来,常年累月下来机会自然而然拥有一套属于自己的高效的组件库。可以提高我们的开发效率,节约时间,让工作变得轻松。

以上就是flutter开发技巧自定页面指示器PageIndicator详解的详细内容,更多关于flutter PageIndicator的资料请关注我们其它相关文章!

(0)

相关推荐

  • Android flutter Dio锁的巧妙实现方法示例

    正文 看Dio库源码的时候,发现其拦截器管理的逻辑处用到了一个Lock,这个Lock巧妙地利用了Completer和Future的机制来实现,记录一下. /// Add lock/unlock API for interceptors. class Lock { Future? _lock; late Completer _completer; /// 标识拦截器是否被上锁 bool get locked => _lock != null; /// Lock the interceptor. /

  • Flutter Zone异常处理方法及基本原理

    目录 1. 认识Zone 1.1 ZoneValues 1.2 ZoneSpecification 1.3 通过runZoned快速创建Zone 2. 异步基本原理和异常捕获 3. HandleUncaughtErrorHandler 1. 认识Zone Zone像一个沙盒,是我们代码执行的一个环境. 我们的main函数默认就运行在Root Zone当中. 子Zone的构造有点像Linux中的进程,它支持从当前的Zone中Fork出一个子Zone: Zone myZone = Zone.curr

  • 详解Flutter中key的正确使用方式

    目录 1.什么是key 2.key的更新原理 3.key的分类 GlobalKey LocalKey 总结 1.什么是key Widget中有个可选属性key,顾名思义,它是组件的标识符,当设置了key,组件更新时会根据新老组件的key是否相等来进行更新,可以提高更新效率.但一般我们不会去设置它,除非对某些具备状态且相同的组件进行添加.移除.或者排序时,就需要使用到key,不然就会出现一些莫名奇妙的问题. 例如下面的demo: import 'dart:math'; import 'packag

  • Flutter有状态组件StatefulWidget生命周期详解

    目录 1.StatefulWidget的背后 2.StatefulWidget的生命周期 2.1创建阶段 2.2更新阶段 2.3销毁阶段 总结: 1.StatefulWidget的背后 flutter开发过程中,我们经常会用到两个组件StatelessWidget和StatefulWidget.前者为无状组件,后者为有状态组件,无状态组件通常在创建后内部的数据无法改变,而有状态组件可以维持内部的数据状态,适合动态组件使用. /// 无状态组件的定义 class MyApp extends Sta

  • flutter布局约束原理深入解析

    目录 引言 1.flutter的widget类型 2.Container是个组合类 3.flutter布局约束 4.Container布局行为解惑 总结 引言 刚开始接触flutter的时候,Container组件是用得最多的.它就像HTML中的div一样普遍,专门用来布局页面的. 但是使用Container嵌套布局的时候,经常出现一些令人无法理解的问题.就如下面代码,在一个固定的容器中,子组件却铺满了全屏. /// 例一 @override Widget build(BuildContext

  • Flutter Widget移动UI框架使用Material和密匙Key实战

    目录 Flutter Material 更完整的示例 Key Flutter Flutter是谷歌的移动UI框架,可以在IOS和Android上快速构建高质量的本地用户界面.Flutter可以使用现有代码. 在世界上,Flutter正被越来越多的开发人员和组织使用,Flutter是完全免费和开源的.这也是构建未来Google Fuchsia应用程序的主要方式. import 'package:flutter/material.dart'; void main() { runApp( new Ce

  • 替换so文件来动态替换Flutter代码实现详解

    目录 一.Flutter代码的启动起点 1.1 initTask对象 1.2 ResourceExtractor 1.3 FlutterJNI#loadLibrary 二.ensureInitializationComplete 2.1 ShellArgs 三.实践:自定义libapp.so的加载 3.1 flutterApplicationInfo和FlutterActivity#getShellArgs() 一.Flutter代码的启动起点 我们在多数的业务场景下,使用的都是FlutterA

  • Flutter开发技巧RadialGradient中radius计算详解

    目录 一.问题来源 二.四种情况 1.情况一 2.情况二 3.情况三 4.情况四 三.实现源码 四.radiusOfRadialGradient 方法实现 最后 一.问题来源 项目中遇到 json 模型映射成 RadialGradient 组件的需求,其他参数正常传递即可: 唯独 radius 参数效果有出入,总结记录一下: 二.四种情况 通过 RadialGradient 参数 center 可以分为四种情况,这四种情况分别对应四种 radius 的值: 1.情况一 Alignment.cen

  • flutter开发技巧自定页面指示器PageIndicator详解

    目录 一.来源 二.效果 三.源码实现 1.flutter_swiper_null_safety 使用示例: 2.PageIndicatorWidget 指示器源码: 三.总结 一.来源 项目中遇到多个需要自定义轮播图指示器的需求,封装成基础组件方便复用: 原理是通过 ValueListenableBuilder 实时监听轮播图的当前索引,然后更新指示器组件,达到最终效果: 二.效果 三.源码实现 1.flutter_swiper_null_safety 使用示例: import 'packag

  • Flutter开发之对角棋游戏实现实例详解

    目录 前沿 演示效果 对角棋规则 实现思路 具体实现 1. 绘制棋盘 2. 绘制棋子 3. 手势处理 4. 游戏规则 优化 总结 前沿 关于对角棋相信大家都不陌生,其凭借着规则简单又灵活多变成为我们童年不可缺少的益智游戏. 今天我将用Flutter来实现一个对角棋游戏,即巩固自己Flutter的绘制和手势知识,也希望这篇文章对大家有所帮助. 演示效果 老规矩,我们先演示下实现的最终效果: 对角棋规则 首先我们还是回顾下对角棋游戏的规则,这里借用 百度百科 的规则说明: 棋盘:象棋棋盘中,将士所在

  • iOS开发技巧之WeakSelf宏的进化详解

    前言 本文主要给大家介绍了关于iOS之WeakSelf宏的进化的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. WeakSelf宏的进化 我们都知道在防止如block的循环引用时,会使用__weak关键字做如下定义: __weak typeof(self) weakSelf = self; 后来,为了方便,不用每次都要写这样一句固定代码,我们定义了宏: #define WeakSelf __weak typeof(self) weakSelf = self; 之后,我

  • Flutter开发技巧ListView去除水波纹方法示例

    正文 ScrollConfiguration( behavior: NoScrollBehaviorWidget(), child: ListView( ...... ...... ), ), 调用ScrollConfiguration官方类,实现behavior NoScrollBehaviorWidget用于去除水波纹的自定义Widget import 'package:flutter/material.dart'; /// 去除listview水印 /// ScrollConfigurat

  • 最锋利的Visual Studio Web开发工具扩展:Web Essentials使用详解

    首先,从Extension Manager里安装:最新版本是19号发布的2.5版 然后重启你的VS开发环境,就可以使用它提供的方便功能了. Web Essentials对CSS.JavaScript和HTML都提供了很多快捷的功能支持,具体列表如下: CSS 即时预览Live Web Preview 每次修改的时候,都可以使用CTRL+ALT+Enter快捷键或者点击方案右键上的Live Web Preview选项来即时预览你修改的页面,每次修改完 HTML或者相应的CSS, Ctrl+S保存以

  • Android开发高仿课程表的布局实例详解

    先说下这个demo,这是一个模仿课程表的布局文件,虽然我是个菜鸟,但我还是想留给学习的人一些例子,先看下效果 然后再来看一下我们学校的app 布局分析 先上一张划分好了的布局图 首先整个页面放在一个LinearLayout布局下面,分为上面和下面两个部分,下面一个是显示课程表的详细信息 1:这个没什么好讲的,就是直接一个LinearLayout布局,然后将控件一个TextView用来显示年份,一个View用来当作竖线,一个Spinner用来显示选择周数 2:这个是显示星期几的部件,是我自定义的V

  • 基于vue cli重构多页面脚手架过程详解

    官方提供的项目生成工具vue-cli没有对多页面webApp的支持,但是在实际的项目中,我们需要这样的脚手架,参考了很多大牛的方法,这里提供了一种我的单页面脚手架转换为多页面脚手架的方案,供大家参考.不好的地方也请大家指正. 准备 使用vue-cli生成一个你需要的单页面项目脚手架,然后我们就要开始我们的改装工程了. 重构过程 步骤一 改变目录结构 step1 在src目录下面新建views文件夹,然后再views文件夹下新建index文件夹 step2 将src目录下的main.js和App.

  • javascrip高级前端开发常用的几个API示例详解

    目录 MutationObserver API 特点 IntersectionObserver API 举个例子 图片懒加载 无限滚动 getComputedStyle() API 与style的异同 getBoundingClientRect API 应用场景 1.获取 dom 元素相对于网页左上角定位的距离 2.判断元素是否在可视区域内 MutationObserver MutationObserver 是一个可以监听 DOM 结构变化的接口. 当 DOM 对象树发生任何变动时,Mutati

  • Android开发两个activity之间传值示例详解

    目录 使用Inten的putExtra传递 使用Intention的Bundle传递 使用Activity销毁时传递数据 SharedPreferences传递数据 使用序列化对象Seriazable 使用静态变量传递数据 handler 使用Inten的putExtra传递 第一个Activity中 //创建意图对象 Intent intent = new Intent(this,MainActivity2.class); //设置传递键值对 intent.putExtra("name&quo

  • Flutter的键值存储数据库使用示例详解

    目录 Flutter 键值存储数据库 unqlite unqlite_flutter 快速上手 简单键值对存储 JSON 为什么你应该使用unqlite_flutter? Flutter 键值存储数据库 键值存储是开发中十分常见的需求,在Flutter开发中,一般使用 shared_preferences 插件来实现.shared_preferences 本质上就是将键值对保存到一个XML文件中进行持久化. 而shared_preferences 实际上存在一定缺陷,譬如其性能较差,不适合处理大

随机推荐