10-Flutter移动电商实战-使用FlutterSwiper制作轮播效果

匿名 (未验证) 提交于 2019-12-02 23:43:01

1、引入flutter_swiper插件

flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配.

好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍后我也是吃了碗贾玲代言的方便面(一桶半),压了压我激动的心情。

Flutter_swiper的GitHub地址:https://github.com/best-flutter/flutter_swiper

了解flutter_swiper后,需要作的第一件事就再pubspec.yaml文件中引入这个插件(录课时flutter_swiper插件的版本文v1.1.6,以后可能会有更新)。

 

引入后在右上角点击 Package get,会自动为我们下载包。

2、首页轮播效果的编写

我们新定义一个类,当然你甚至可以新起一个文件,完全独立出来。这样一个页面就可以分为多个类,然后写完后由项目组长统一整合起来。

当然作练习就没必要每一个模块都分一个dart文件了,要不太乱,自己反而降低编写效率。所以就写在同一个目录里了。

首先引入flutter_swiper插件,然后就可以编写自定义轮播类了。

新写了一个SwiperDiy的类,当然这个类用静态类就完全可以了,这个类是需要接受一个List参数的,所以我们定义了一个常量swiperDataList,然后返回一个组件,这个组件其实就是Swiper组件,不过我们在Swiper组件外边包裹了一个Container。

代码如下:

 

3、FutureBuilder Widget

这是一个Flutter内置的组件,是用来等待异步请求的。现在可以使用FuturerBuilder来改造HomePage类里的build方法,具体代码细节在视频中进行讲解。

代码如下:

 

有了这个方法,我们就没必要再用initState了,删除了就可以了。全体代码如下:

 

效果如下图所示:

4、课程总结:

  • flutter_Swiper:学习了flutter_swiper组件的简单使用方法,当然你还可以自己学习。
  • FutureBuilder: 这个布局可以很好的解决异步渲染的问,实战中我们讲了很多使用的技巧,注意反复学习。
  • 自定义类接受参数:我们复习了类接受参数的方法。学会了这个技巧就可以把我们的页面分成很多份,让很多人来进行编写,最后再整合到一起。
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!