文章目錄

• 一、flutter_swiper 插件
• 二、Swiper 組件使用
• 三、完整代碼示例
• 四、相關資源

一、flutter_swiper 插件

---

到 https://pub.dev/packages 搜索 flutter_swiper 組件 https://pub.dev/packages/flutter_swiper ;

安裝 flutter_swiper 插件 :

① 配置 Flutter 插件 : 在 pubspec.yaml 配置文件中配置 Flutter 插件 :

dependencies:flutter_swiper: ^1.1.6

② 獲取 Flutter 插件 : 點擊右上角的 " Pub get " 按鈕 , 獲取插件 , 此時會自動從 https://pub.dev/packages 平臺下載該插件并配置到 Flutter 項目中 ;

③ 在項目中引入 : 在需要使用 Banner 輪播插件 flutter_swiper 的組件代碼中導入該 dart 包 ;

import 'package:flutter_swiper/flutter_swiper.dart';

二、Swiper 組件使用

---

安裝 flutter_swiper 插件包后 , 在 dart 源碼中導入該插件包 ,

import 'package:flutter_swiper/flutter_swiper.dart';

即可在相應的 dart 文件中使用 Swiper 組件 ;

主要設置 Swiper 如下四個參數 :

① int itemCount : 輪播圖的數量 , 就是有幾張圖片在輪播狀態 ;

② bool autoplay : 是否自動輪播圖片 ;

③ IndexedWidgetBuilder itemBuilder : 設置輪播組件 , 注意 IndexedWidgetBuilder 類型是一個方法 , 該方法返回 Widget 組件 ;

typedef IndexedWidgetBuilder = Widget Function(BuildContext context, int index);

④ SwiperPlugin pagination : 輪播指示器 , 輪播組件下面的小圓點 ;

代碼示例 :

Swiper(/// 輪播圖數量itemCount: _imageUrls.length,/// 設置輪播圖自動播放autoplay: true,/// 輪播條目組件itemBuilder: (BuildContext context, int index) {return Image.network(/// 圖片 URL 鏈接_imageUrls[index],/// 縮放方式fit: BoxFit.fill,);},/// 輪播圖指示器pagination: SwiperPagination(), ),

三、完整代碼示例

---

完整代碼示例 :

import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart';/// 應用主界面 class HomePage extends StatefulWidget {@override_HomePageState createState() => _HomePageState(); }class _HomePageState extends State<HomePage> {List _imageUrls = ["https://img-blog.csdnimg.cn/20210401205234582.png","https://img-blog.csdnimg.cn/20210401205307863.png","https://img-blog.csdnimg.cn/20210401205249606.png"];@overrideWidget build(BuildContext context) {/// 界面框架return Scaffold(/// 居中組件body: Center(child: Column(children: [Container(/// 設置 Banner 輪播圖 160 像素height: 200,/// 這是 flutter_swiper 插件的輪播圖child: Swiper(/// 輪播圖數量itemCount: _imageUrls.length,/// 設置輪播圖自動播放autoplay: true,/// 輪播條目組件itemBuilder: (BuildContext context, int index) {return Image.network(/// 圖片 URL 鏈接_imageUrls[index],/// 縮放方式fit: BoxFit.fill,);},/// 輪播圖指示器pagination: SwiperPagination(),),),],),),);} }

運行效果 :

四、相關資源

---

參考資料 :

• Flutter 官網 : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發文檔 : https://flutter.cn/docs ( 強烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區 : https://flutter.cn/
• Flutter 實用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發者官網 : https://api.dart.dev/
• Flutter 中文網 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實戰電子書 : https://book.flutterchina.club/chapter1/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_app ( 隨博客進度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/16311756 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結

以上是生活随笔為你收集整理的【Flutter】Banner 轮播组件 ( flutter_swiper 插件 | Swiper 组件 )的全部內容，希望文章能夠幫你解決所遇到的問題。

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