当前位置： 移动技术网 > IT编程>移动开发>Android > flutter实现轮播图效果

flutter实现轮播图效果

2019年09月06日  | 移动技术网IT编程  | 我要评论

回到过去当土豪,燕子717微博,越野四合一

本文实例为大家分享了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),
  );
 }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网