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

轉載于:https://www.cnblogs.com/niceyoo/p/11029170.html

總結

以上是生活随笔為你收集整理的10-Flutter移动电商实战-使用FlutterSwiper制作轮播效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。