Flutter 之 flutter_swiper (轮播图)

简介: Flutter 之 flutter_swiper (轮播图)

Flutter 之 flutter_swiper (轮播图)

image.png

new Swiper(
//滚动方向
                        scrollDirection: Axis.horizontal,
//无限轮播
                        loop: true,
//                    是否自动播放
                        autoplay: true,
// 播放间隔时常
                        autoplayDelay: 3000,
//                    当用户拖拽的时候,是否停止自动播放.
                        autoplayDisableOnInteraction: true,
//设置轮播图片
                        itemBuilder: _swiperBuilder,
//                        设置轮播数量
                        itemCount: piclist.length,
//                        viewportFraction: 0.8,
//                        设置指示器
                        pagination: new SwiperPagination(
                            builder: DotSwiperPaginationBuilder(
                          color: Colors.white12,
                          activeColor: Colors.lightBlueAccent,
                        ))),
                  ),

image.png

  Widget _swiperBuilder(BuildContext context, int index) {
    return (Image.network(
      piclist[index],
      fit: BoxFit.fill,
    ));
  }
final List<String> piclist = [
  "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3965895917,3845310417&fm=27&gp=0.jpg",
  "http://www.hbksnet.com/static/index/img/about/1208045_1320901780_0h3u.png",
  "http://www.hbksnet.com/static/index/img/%E4%BA%A7%E5%93%81%E4%B8%8E%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/pic01.png"
];
目录
相关文章
|
3天前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
138 0
|
设计模式
flutter系列之:在flutter中自定义themes
一般情况下我们在flutter中搭建的app基本上都是用的是MaterialApp这种设计模式,MaterialApp中为我们接下来使用的按钮,菜单等提供了统一的样式,那么这种样式能不能进行修改或者自定义呢? 答案是肯定的,一起来看看吧。
|
存储 前端开发
flutter系列之:在flutter中使用导航Navigator
一个APP如果没有页面跳转那么是没有灵魂的,页面跳转的一个常用说法就是Navigator,flutter作为一个最为优秀的前端框架,Navigator肯定是必不可少的,那么在flutter中如何使用Navigator呢? 一起来看看吧。
flutter系列之:在flutter中使用导航Navigator
Flutter自定义Dialog
Flutter自定义Dialog
131 0
Flutter自定义Dialog
flutter系列之:在flutter中使用流式布局
我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整。这时候就会用到flow layout,也就是流式布局。 同样的,在flutter中也有流式布局,这个流式布局的名字叫做Flow。事实上,在flutter中,Flow通常是和FlowDelegate一起使用的,FlowDelegate用来设置Flow子组件的大小和位置,通过使用FlowDelegate.paintChildre可以更加高效的进行子widget的重绘操作。今天我们来详细讲解flutter中flow的使用。
flutter系列之:在flutter中使用流式布局
flutter 之侧边栏
flutter 之侧边栏
303 0
flutter 之侧边栏
|
JSON 安全 数据格式
Flutter(五)之Flutter滚动Widget(下)
列表是移动端经常使用的一种视图展示方式,在Flutter中提供了ListView和GridView。 为了可能展示出更好的效果,我这里提供了一段Json数据,所以我们可以先学习一下Json解析。
358 0
Flutter(五)之Flutter滚动Widget(下)
|
JSON Dart 安全
Flutter(五)之Flutter滚动Widget(上)
列表是移动端经常使用的一种视图展示方式,在Flutter中提供了ListView和GridView。 为了可能展示出更好的效果,我这里提供了一段Json数据,所以我们可以先学习一下Json解析。
206 0
Flutter(五)之Flutter滚动Widget(上)
|
前端开发 Android开发 iOS开发
Flutter(四)之Flutter的布局Widget
为了实现界面内组件的各种排布方式,我们需要进行布局,和其他端不同的是,Flutter中因为万物皆Widget,所以布局也是使用Widget来完成的。 Flutter中的布局组件非常多,有31个用于布局的组件,Flutter布局组件[1]; 在学习的过程中,我们没必要一个个全部掌握,掌握最常用的,一些特殊的组件用到时去查文档即可; Flutter将布局组件分成了 单子布局组件(Single-child layout widgets) 和 多子布局组件(Multi-child layout widgets)
199 0
Flutter(四)之Flutter的布局Widget
Flutter 滑动删除
Flutter 滑动删除
324 0