Flutter移動電商實戰-使用FlutterSwiper制作輪播效果

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: 這個布局可以很好的解決異步渲染的問,實戰中我們講了很多使用的技巧，注意反復學習。
• 自定義類接受參數：我們復習了類接受參數的方法。學會了這個技巧就可以把我們的頁面分成很多份，讓很多人來進行編寫，最后再整合到一起。