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,以后可能会有更新)。

flutter_swiper : ^1.1.6  (记得使用最新版)

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

2、首页轮播效果的编写

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

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

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

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

代码如下:

首页轮播组件编写
class SwiperDiy extends StatelessWidget {
  final List swiperDataList;
  SwiperDiy({Key key,this.swiperDataList}):super(key:key);   @override
  Widget build(BuildContext context) {
    return Container(
      height: 333.0,
      child: Swiper(
        itemBuilder: (BuildContext context,int index){
          return Image.network("${swiperDataList[index]['image']}",fit:BoxFit.fill);
        },
        itemCount: swiperDataList.length,
        pagination: new SwiperPagination(),
        autoplay: true,
      ),
    );
  }
}

3、FutureBuilder Widget

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

代码如下:

@override
  Widget build(BuildContext context) {     return Scaffold(
      appBar: AppBar(title: Text('百姓生活+'),),
      body:FutureBuilder(
        future:getHomePageContent(),
        builder: (context,snapshot){
          if(snapshot.hasData){
             var data=json.decode(snapshot.data.toString());
             List<Map> swiperDataList = (data['data']['slides'] as List).cast(); // 顶部轮播组件数
             return Column(
               children: <Widget>[
                   SwiperDiy(swiperDataList:swiperDataList ),   //页面顶部轮播组件
               ],
             );
          }else{
            return Center(
              child: Text('加载中'),
            );
          }
        },
      )
    );   }

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

import 'dart:convert';

import 'package:flutter/material.dart';
import '../service/service_method.dart';
import 'package:flutter_swiper/flutter_swiper.dart'; class HomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> {   String homePageContent='正在获取数据';   @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('百姓生活+'),
        ),
        body:FutureBuilder(
            future: getHomePageContent(),
            builder: (context,snapshot){
              if(snapshot.hasData){
                var data = json.decode(snapshot.data.toString());
                List<Map> swiper = (data['data']['slides'] as List).cast();
                return Column(
                  children: <Widget>[
                    SwiperDiy(swiperDataList: swiper,)
                  ],
                );
              }else{
                  return Center(
                    child: Text("加载中"),
                  );
              }
            },
        )
    );
  }
} 轮播组件
class SwiperDiy extends StatelessWidget {   final List swiperDataList;   SwiperDiy({Key key,this.swiperDataList}):super(key:key);   @override
  Widget build(BuildContext context) {
    return Container(
      height: 333.0,
      child: Swiper(
          itemCount: swiperDataList.length,
          itemBuilder: (BuildContext context,int index){
              return Image.network("${swiperDataList[index]['image']}",fit:BoxFit.fill);
          },
          pagination: SwiperPagination(),
          autoplay: true,
      ),
    );
  }
}

效果如下图所示:

4、课程总结:

  • flutter_Swiper:学习了flutter_swiper组件的简单使用方法,当然你还可以自己学习。
  • FutureBuilder: 这个布局可以很好的解决异步渲染的问,实战中我们讲了很多使用的技巧,注意反复学习。
  • 自定义类接受参数:我们复习了类接受参数的方法。学会了这个技巧就可以把我们的页面分成很多份,让很多人来进行编写,最后再整合到一起。

10-Flutter移动电商实战-使用FlutterSwiper制作轮播效果的更多相关文章

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

    1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 好牛X得介绍,一般敢用“最”的一般都是神级大神,看到这个介绍 ...

  2. Flutter移动电商实战 --(43)详细页_补充首页跳转到详细页

    首页轮播点击到详细页 修改我们轮播这里的代码:SwiperDiy这个类这里的代码 return InkWell( onTap: (){ Application.router.navigateTo(co ...

  3. Flutter移动电商实战 --(14)首页_拨打电话操作

    拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块 这个小伙伴们一定轻车熟路了, ...

  4. Flutter移动电商实战 --(12)首页导航区域编写

    1.导航单元素的编写 从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套的问题,如果我们都写在一个组件里,那势必造成嵌套严重 ...

  5. Flutter移动电商实战 --(1)项目学习记录

    1.项目相关截图 2.项目知识点梳理图 Dio2.0: Dio是一个强大的 Dart Http 请求库,支持 Restful API.FormData.拦截器.请求取消等操作. Swiper: Swi ...

  6. Flutter移动电商实战 --(44)详细页_首屏自定义Widget编写

    把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建页面details_top_area.da ...

  7. Flutter移动电商实战 --(20)首页上拉加载更多功能的制作

    这节课学习一下上拉加载效果,其实现在上拉加载的插件有很多,但是还没有一个插件可以说完全一枝独秀,我也找了一个插件,这个插件的优点就是服务比较好,作者能及时回答大家的问题.我觉的选插件也是选人,人对了, ...

  8. Flutter移动电商实战 --(11)首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

  9. Flutter Swiper制作轮播效果

    1.引入flutter_swiper插件 flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. Flutter_swiper的GitHub地址:https: ...

随机推荐

  1. netcore 版本 切换 sdk

    https://docs.microsoft.com/zh-cn/dotnet/core/tools/global-json

  2. Forbidden (CSRF token missing or incorrect.):

    CSRF令牌失效或丢失,Ajax请求页面报错(403 Forbidden ) csrftoken存在 页面响应为CSRF验证失败请求被中断,经过测试,该错误并非是没有在表单中加入{% csrf_tok ...

  3. Jenkins服务使用 宿主机的docker、docker-compose (Jenkins 执行sudo命令时出现“sudo: no tty present and no askpass program specified”,以及 docker-compose command not found解决办法)

    若要转载本文,请务必声明出处:https://www.cnblogs.com/zhongyuanzhao000/p/11681474.html 原因: 本人最近正在尝试CI/CD,所以就使用了 Jen ...

  4. js 不同浏览器的类型判断 navigator.userAgent

    一.通过navigator.userAgent来进行浏览器类型判断 // 判断浏览器内核.手机系统等,使用 browser.userAgent.mobile var browser = { userA ...

  5. kafka使用SASL_PLAINTEXT做用户认证

    使用SASL/PLAIN认证 server端1.配置brokerkafka_server_jaas.conf内容KafkaServer {org.apache.kafka.common.securit ...

  6. java之spring之整合ssh-2

    这篇也是主要讲解 ssh 的整合,不同于上一篇的是它的注入方式. 这篇会采用扫描注入的方式,即去除 applicationContext-asd.xml 文件. 目录结构如下: 注意,这里只列举不同的 ...

  7. iOS之集成GoogleMap定位、搜索注意事项

    简介: 最近花了些时间看了GoogleMap官方文件并集成到国际版app中,网上关于GoogleMap for iOS的讲解相对Android来说少一点,比较有帮助的几乎全是英文文档.下面是我开发过程 ...

  8. Java中强大的format

    Java中强大的format Java中允许我们对指定的对象进行某种格式化,从而得到我们想要的格式化样式. Format 首先介绍java.text包中的Format Foramt是一个抽象基类,其具 ...

  9. 重要知识点angularjs $http.get 和 $http.post 传递参数(!!!格式不一样!!!!)

    $http.get请求数据的格式 $http.get(URL,{ params: { "id":id } }) .success(function(response, status ...

  10. js数组【续】(相关方法)

    一.数组的栈,队列方法[调用这些方法原数组会发生改变]var arr = [2,3,4,5,6];1.栈 LIFO (Last-In-First-Out)a.push() 可接受任意类型的参数,将它们 ...