7、Flutter banner_view 轮播图的使用

1、前言

实现轮播图,效果如下:

2、实现

将采用 banner_view 实现:资源库地址

2.1、yaml 引入依赖

在 pubspec.yaml 声明需要引用的库,执行命令 flutter packages get 进行拉取即可使用。

banner_view: "^1.1.2"

2.2、代码中引入依赖

在资源库地址下方,作者提供了 banner_view 的几种展示方式。

import 'package:flutter/material.dart';
import 'package:banner_view/banner_view.dart';import 'Pair.dart';
import 'factory/BannerItemFactory.dart';class BannerViewPage extends StatefulWidget {@override_BannerViewPageState createState() => new _BannerViewPageState();
}class _BannerViewPageState extends State<BannerViewPage> {@overrideWidget build(BuildContext context) {return new Scaffold(body:new Container(child:  new Column(children: <Widget>[new Container(alignment: Alignment.center,height: 200.0,child: this._bannerView0(),padding: EdgeInsets.only(bottom: 10.0),)],),),);}/*** 第一种方式*/BannerView _bannerView0() {// 盛放图片的 ListList<Pair<String, Color>> param = [Pair.create('https://p5.ssl.qhimg.com/dm/456_209_/t01f43c5849ef5f521a.jpg', Colors.red[500]),Pair.create('https://p.ssl.qhimg.com/t0171bb61911ebe8899.jpg', Colors.green[500]),Pair.create('https://p.ssl.qhimg.com/t01ee77978d3a95a3ae.jpg', Colors.blue[500]),];return new BannerView(BannerItemFactory.banners(param),);
//    return new BannerView(
//      BannerItemFactory.banners(param),
//      indicatorMargin: 10.0,
//      indicatorNormal: new Container(
//        width: 5.0,
//        height: 5.0,
//        decoration: new BoxDecoration(
//          color: Colors.green,
//          shape: BoxShape.rectangle,
//        ),
//      ),
//      indicatorSelected: new Container(
//        width: 15.0,
//        height: 5.0,
//        decoration: new BoxDecoration(
//          color: Colors.black,
//          shape: BoxShape.rectangle,
//          borderRadius: new BorderRadius.all(
//            new Radius.circular(5.0),
//          ),
//        ),
//      ),
//      indicatorBuilder: (context, indicator) {
//        Widget cc = new Container(
//          padding: new EdgeInsets.symmetric(horizontal: 20.0,),
//          height: 44.0,
//          width: double.infinity,
//          color: Colors.grey[300],
//          child: indicator,
//        );
//        return new Opacity(
//          opacity: 0.5,
//          child: cc,
//        );
//      },
//    );
  }/*** 第二种方式*/BannerView _bannerView() {var pre = 'https://raw.githubusercontent.com/yangxiaoweihn/Assets/master';List<Pair<String, Color>> param = [Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/cars/car_0.jpg', Colors.red[100]),Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/cartoons/ct_0.jpg', Colors.green[100]),Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/pets/cat_1.jpg', Colors.blue[100]),Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/scenery/s_1.jpg', Colors.yellow[100]),Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/cartoons/ct_1.jpg', Colors.red[100]),
//      Pair.create('$pre/cartoons/ct_1.jpg', Colors.red[100]),
    ];return new BannerView(BannerItemFactory.banners(param),indicatorMargin: 10.0,indicatorNormal: new Container(width: 5.0,height: 5.0,decoration: new BoxDecoration(color: Colors.green,shape: BoxShape.rectangle,),),indicatorSelected: new Container(width: 15.0,height: 5.0,decoration: new BoxDecoration(color: Colors.black,shape: BoxShape.rectangle,borderRadius: new BorderRadius.all(new Radius.circular(5.0),),),),indicatorBuilder: (context, indicator) {Widget cc = new Container(padding: new EdgeInsets.symmetric(horizontal: 20.0,),height: 44.0,width: double.infinity,color: Colors.grey[300],child: indicator,);return new Opacity(opacity: 0.5,child: cc,);},);}
}

posted @ 2019-01-26 15:58 niceyoo 阅读(...) 评论(...) 编辑 收藏

7、Flutter banner_view 轮播图的使用相关推荐

  1. Flutter banner轮播图之Swiper

    文章目录 关于Swiper 示例并讲解 基础使用 分页控制器 显示样式 指示器 点击事件 高度自适应 完整代码 详细属性 基本参数 分页指示器 控制按钮 控制器(SwiperController) 轮 ...

  2. Flutter 轮播图(基础版)

    哈哈哈,女帝的身材绝了呀,做一个轮播图慢慢看,身材比例也太好吧,你们也赶紧收藏学起来吧~ 老规矩,先看图 (一)效果图 (二)效果实现 首先,我们要引入依赖,在pubspec.yml这个文件写入一个指 ...

  3. 用Flutter实现一个类似于轮播图的效果

    效果图: 过程脑洞自补!!! 类似于上图的效果,我们应该能想到用PageView来实现,但是思来想去,PageView官方并没有给自定义的参数,就是我们需要的下面的指示器的效果.现在我就来说下一下怎么 ...

  4. Flutter轮播图

    1 添加依赖库 flutter_swiper: ^1.0.6 2 普通常用 圆点指示器自动轮播图 class SwiperViewDefaultPage extends StatefulWidget ...

  5. flutter 轮播图动态加载网络图片

    Swiper,网上很多列子只是加载固定的几张图,并且页面只有一个轮播图,在实际应用中,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况. 需要添加依赖包flukit: ^1.0.0引用 im ...

  6. flutter CustomScrollView中使用Swiper做轮播图问题

    有朋友问我CustomScrollView中使用Swiper做轮播图问题 以前没这么用过,也是才发现CustomScrollView 与 Swiper 冲突,直接报错. 网友说修改源码,试过不能用,但 ...

  7. android 炫酷轮播图,一个很Nice的Android Banner轮播图库

    Android小白一枚,最近项目中有一个轮播图的需求,网上搜了很多资料,也看了多开源库,但不是bug多就是库不维护.后来在GitHub上找到一个很棒的轮播图–BannerViewPager库推荐个大家 ...

  8. php 更换轮播图片不显示不出来,layui 轮播图动态数据不显示问题

    layui.use('carousel', function() { var carousel = layui.carousel; var ins = carousel.render({ elem: ...

  9. Android弧形广告图,简单封装弧形广告轮播图(ViewPager+贝塞尔曲线)

    前言 通过ViewPager和贝塞尔曲线实现了一个弧形广告轮播图. 效果图 弧形ViewPager 实现方法 想要实现这个效果,现在几行代码就可以了: Step 1. Add it in your r ...

最新文章

  1. stm32硬件消抖_在 STM32 上使用 C++ 指南
  2. go get 加 -u 和不加 -u 参数的区别
  3. Google Chrome保存插件方法
  4. C++是如何实现多态的
  5. 今天开通一个真正属于自己的博客了《L.M》
  6. ASP.NET基础教程-Server对象
  7. [Python WEB开发] 使用WSGI开发类Flask框架 (二)
  8. 设计递归算法,删除不带头结点的单链表L中所有值为X的结点
  9. Multisim14.0的详细安装步骤
  10. 再起风云的社交电商,到底是穷途末路还是柳暗花明?
  11. 深度系统linux分区格式,国产系统deepin硬盘安装方法(分区为mbr格式)
  12. 参数错误。 (异常来自 HRESULT:0x80070057 (E_INVALIDARG))
  13. 金庸去世!马云终于发声,句句痛心!若无先生,不知是否会有阿里
  14. sklearn.LabelEncoder解决未见过值问题ValueError y contains previously unseen labels [69]
  15. 东北大学软件项目管理与过程改进复习提纲(2020)——第八章《项目质量管理》
  16. Netron 可视化
  17. 计算机一级office考试攻略,计算机一级考试MSOffice应试技巧
  18. GE工业软件如何离线激活授权?
  19. 阿里聚安全攻防挑战赛第三题Android PwnMe解题思路
  20. 【群话题精华】五月集锦—— 机器学习和深度学习中一些值得思考的问题

热门文章

  1. 工作77::配置id传值地址
  2. 前端学习(2053)vue之电商管理系统电商系统之使用pm2管理
  3. 前端学习(1022):jquery学习目标
  4. mybatis学习(13): 连接数据库之前的准备(测试连接)
  5. 第五十二期:Java开发数据库设计的14个技巧,你知道几个?
  6. 第二十六期:100 个网络基础知识普及,看完成半个网络高手
  7. 55exception对象
  8. Linux Socket网络通信示例
  9. wince linux 性能,wince remote call profiler(性能分析)
  10. scratch的积木相与java的_scratch课堂:积木块详解