flutter实现轮播图效果

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

1 添加依赖库

flutter_swiper: ^1.0.6

2 普通常用 圆点指示器自动轮播图

class SwiperViewDefaultPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() {
  return new SwiperViewDefaultPageState();
 }
}

class SwiperViewDefaultPageState
  extends BaseAppBarPageState<SwiperViewDefaultPage> {
 @override
 String buildInitState() {
  buildBackBar("轮播图", backIcon: Icons.arrow_back_ios);
  return null;
 }

 @override
 Widget buildWidget(BuildContext context) {
  print("build --");
  return new Column(
   children: <Widget>[
    Padding(
     padding: EdgeInsets.all(10),
    ),
    buildStyle1(),
   ],
  );
 }

 // 分页指示器
 buildSwiperPagination() {
  return SwiperPagination(
   //指示器显示的位置
   alignment: Alignment.bottomCenter, // 位置 Alignment.bottomCenter 底部中间
   // 距离调整
   margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
   // 指示器构建
   builder: DotSwiperPaginationBuilder(
     // 点之间的间隔
     space: 2,
     // 没选中时的大小
     size: 6,
     // 选中时的大小
     activeSize: 12,
     // 没选中时的颜色
     color: Colors.black54,
     //选中时的颜色
     activeColor: Colors.white),
  );
 }

 //banner 图
 Widget buildStyle1() {
  return Container(
   height: 200.0,
   child: new Swiper(
    // 横向
    scrollDirection: Axis.horizontal,
    // 布局构建
    itemBuilder: (BuildContext context, int index) {
     return new Image.network(
      "http://hbimg.b0.upaiyun.com/a3e592c653ea46adfe1809e35cd7bc58508a6cb94307-aaO54C_fw658",
      fit: BoxFit.fill,
     );
    },
    //条目个数
    itemCount: 6,
    // 自动翻页
    autoplay: true,
    // 分页指示
    pagination: buildPlugin(),
    //点击事件
    onTap: (index) {
     print(" 点击 " + index.toString());
    },
    // 相邻子条目视窗比例
    viewportFraction: 1,
    // 布局方式
    //layout: SwiperLayout.STACK,
    // 用户进行操作时停止自动翻页
    autoplayDisableOnInteraction: true,
    // 无线轮播
    loop: true,
    //当前条目的缩放比例
    scale: 1,
   ),
  );
 }

 buildPlugin() {
  return SwiperPagination();
 }
}

3 自定圆点分页指示器 效果

 //自定圆点分页指示器
 buildSwiperPagination() {
  // 分页指示器
  return SwiperPagination(
   //指示器显示的位置
   alignment: Alignment.bottomCenter, // 位置 Alignment.bottomCenter 底部中间
   // 距离调整
   margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
   // 指示器构建
   builder: DotSwiperPaginationBuilder(
     // 点之间的间隔
     space: 2,
     // 没选中时的大小
     size: 6,
     // 选中时的大小
     activeSize: 12,
     // 没选中时的颜色
     color: Colors.black54,
     //选中时的颜色
     activeColor: Colors.white),
  );
 }

 //定义轮播图组件
 Widget buildStyle1() {
  return Container(
   height: 200.0,
   child: new Swiper(
    // 横向
    scrollDirection: Axis.horizontal,
    // 布局构建
    itemBuilder: (BuildContext context, int index) {
     return new Image.network(
      "http://hbimg.b0.upaiyun.com/a3e592c653ea46adfe1809e35cd7bc58508a6cb94307-aaO54C_fw658",
      fit: BoxFit.fill,
     );
    },
    //条目个数
    itemCount: 6,
    // 自动翻页
    autoplay: true,
    // 分页指示
    pagination: buildSwiperPagination(),
    //点击事件
    onTap: (index) {
     print(" 点击 " + index.toString());
    },
    // 视窗比例
    viewportFraction: 1,
    // 布局方式
    //layout: SwiperLayout.STACK,
    // 用户进行操作时停止自动翻页
    autoplayDisableOnInteraction: true,
    // 无线轮播
    loop: true,
    scale: 1,
   ),
  );
 }

4 自定数字 分页指示器 效果

 //自定义分页指示器
 buildSwiperPagination() {
  // 分页指示器
  return SwiperPagination(
   //指示器显示的位置
   alignment: Alignment.bottomCenter, // 位置 Alignment.bottomCenter 底部中间
   // 距离调整
   margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
   // 指示器构建
   builder: FractionPaginationBuilder(
     // 选中时字体大小
     activeFontSize: 14,
     // 字体大小
     fontSize: 14,
      // 字体颜色
     color: Colors.red,
     //选中时的颜色
     activeColor: Colors.blue),
  );
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Android自定义控件实现简单的轮播图控件

    最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处:循环广告位组件的实现,这里只是做了下封装成一个控件,不必每次重复写代码了. 效果图: 实现分析 轮播图的功能就是实现左右滑动的广告.图片信息展示,那我们就用ViewPager来实现,由于考虑到用户体验,我们还需要在下面加一个指示器来标示滑动到了第几张轮播图.指示器我们可以用一个线性布局来根据要展示的轮播图

  • 简单实现android轮播图

    轮播图是很常用的一个效果 核心功能已经实现 没有什么特殊需求 自己没事研究的 所以封装的不太好 一些地方还比较糙 为想要研究轮播图的同学提供个参考 目前测试图片为mipmap中的图片 没有写从网络加载图片 可自行根据需求在getShowView()方法中修改 1.定时切换 通过handle延时发送通知改变界面 然后在切换viewpage的界面之后 再次发送此延时通知 就ok咯 还可以通过timer定时器实现 2.无限轮播效果 如果我们只是在自动轮播到最后一页 然后进行判断让切换到第一页 这样是可

  • Android自定义控件实现优雅的广告轮播图

    前言 今天给大家带来一个新的控件–轮播图,网上已经有很多这类的博客来讲解如何实现的,那么我的这个有哪些特点呢?或是说有哪些不同呢? 满足了轮播图的基本要求,循环滑动,在最后一张切到第一张时可以平稳的过渡 简洁简洁简洁 扩展性强 如何使用 下面我们先展示两种效果图 1 默认效果 代码实现 //布局代码 <com.landptf.view.BannerM android:id="@+id/bm_banner" android:layout_width="match_pare

  • Android ViewPager实现轮播图效果

    先上一张效果图: 说到ViewPager实现轮播图效果,那么肯定会用到PagerAdapter,下面先介绍下这个类. PagerAdapter简介 PagerAdapter是Android.support.v4包中的类,是一个抽象类,直接继承于Object,导入包android.support.v4.view.PagerAdapter即可使用. PagerAdapter主要是viewpager的适配器,而viewPager则也是在android.support.v4扩展包中新添加的一个强大的控件

  • Android实现轮播图无限循环效果

    本文实例为大家分享了Android轮播图无限循环的具体代码,供大家参考,具体内容如下 实现无限循环 在getCount()方法中,返回一个很大的值,Integer.MAX_VALUE 在instantiateItem()方法中,获取当前View的索引时,进行取于操作,传递进来的int position是个非常大的数,对他进行求余数 在destroyItem()方法中,同样 在onPageSelected()监听方法中,对传递进来的索引进行取于 反向的无限循环 调用ViewPager对象的setC

  • Android实现炫酷轮播图效果

    轮播图的实现有很多种方式,早先我在网上看了下别人写的轮播图,感觉都比较的墨守成规,有的还有可能加载不了网络图片.所以我在这里自己重新写了下轮播图 ,方便日后的项目使用. 在下面的代码中,我也用volley封装了网络请求框架,异步加载网络图片,也可以给大家参考,非常实用. 效果图:这只是其中的一种效果 底层封装的我在下面会一一展示,先看下在MainActivity中怎样调取这个轮播控件 package com.wujie.advertisment.activity; import android.

  • Android实现基于ViewPager的无限循环自动播放带指示器的轮播图CarouselFigureView控件

    最近用到需要无限轮播自动播放的轮播轮播图,网上感觉都有这样那样的问题,于是自己写了一个通用的控件CarouselFigureView. 特点: 1.可以轮播view可以自己定义,不一定是要是ImageView2.指示器默认显示,但是可以隐藏3.可以设置指示器的颜色.间距.大小 4.有基础的可以自己修改代码改变指示器位置,这个应该不难5.可以自己开启和关闭自动轮播,开启轮播的时候可以设置轮播时间间隔,默认3000毫秒 我们先来看看效果图: 然后来看看使用代码 xml代码 <?xml version

  • Android如何使用RecyclerView打造首页轮播图

    先看看效果图: 停在中间自动翻页 序言:最近接到一个任务,做一个类似上面自动翻页的功能.可以看到,这一屏中有三张图片显示出来了,有两张没有显示完全,看到设计图的时候第一反应是可以用viewpager来实现,但是任务却跟你开了一个天大的玩笑,要求是以最左边的图片为基准,也就是说,左边的图片也得显示完全,就像下图所示,后来仔细想想viewpager好像没有这样的功能,也有可能是我不知道,我也没有找到这样的文章或者信息,希望知道的简友私戳交流一下,感激不尽,好了,言归正传 停在左边 在开始之前呢,首先

  • Android实现ViewPage轮播图效果

    在android移动端的开发中,首页轮播图是一个特别常见的功能,所以今天就来将最近写的一个小demo记录一下. 首先当然是新建一个项目代码如下: activity_main.xml文件: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:to

  • Android开发在轮播图片上加入点击事件的方法

    这是我加在里面的代码,用Switch(position) 来获取当前图片,在相应的图片上加入点击事件, case  0:, case 1: 时代码如下,当点击第一张图片时,想实现case 0里面的代码,但是直接直接报错,退出,当点击第二张实现case 1中的代码时却是没问题,我想知道到底哪里不对啊. 对了,这些代码是在Fragemnt内写的,点击图片时是要从一个Fragment转到一个Activity,求大神指教

随机推荐