Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作

10.首页_FlutterSwiper轮播效果制作

 博客地址：

https://jspang.com/post/FlutterShop.html#toc-5c2

 flutter_swiper

https://github.com/best-flutter/flutter_swiper

 

pubspec.yaml内配置插件的引用。配置好以后进行保存。最好开启科学上网工具 防止下载很慢的情况

这里还是和视频里面用一个版本的吧 1.1.4因为我在本机设置为1.1.6的时候，保存了文件没有自动去下载包文件。后来又修改为1.1.4版本以后才真正的去下载了对应的文件

 

 

自定义swiperDiy的类

这个类是静态的

构造函数这里写的key是什么意思呢？可不可以不写呢？

这是官方希望你这么写。这里有一个Key。官方解释，这里是一个无名无参的它的父类。我们要调用父类，传递一个key

1.0版本出来以后可以不用传key了。形成一个构造函数就可以了。它就可以用了。技术胖建议还是用传递key的那种形式。官方案例都是那么写的

在页面内引入flutter_swiper

import 'package:flutter_swiper/flutter_swiper.dart';

然后我们就可以使用swiper这个widget了

它有点像我们list，它有构造函数itemBilder

 

这样我们的swiper轮播组件就写好了。

然后再改造上一节课的代码

FutureBuild组件完美解决异步渲染，不用setState就可以渲染的很好。

builder：就是我们的方法在异步进行的时候怎么操作。

builder接收两个值

 

删除的代码

  @override
  void initState() {
    getHomePageContent().then((val){
      setState(() {
       homePageContent=val.toString(); 
      });
    });
    super.initState();
  }

View Code