Flutter banner_view 輪播圖的使用及實現(xiàn)代碼

更新時間：2019年07月25日 10:42:41 作者：niceyoo

這篇文章主要介紹了Flutter banner_view 輪播圖的使用及實現(xiàn)代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下

1、前言

實現(xiàn)輪播圖，效果如下：

2、實現(xiàn)

將采用 banner_view 實現(xiàn)：資源庫地址

2.1、yaml 引入依賴

在 pubspec.yaml 聲明需要引用的庫，執(zhí)行命令 flutter packages get 進行拉取即可使用。

banner_view: "^1.1.2"

2.2、代碼中引入依賴

在資源庫地址下方，作者提供了 banner_view 的幾種展示方式。

import 'package:flutter/material.dart';
import 'package:banner_view/banner_view.dart';
import 'Pair.dart';
import 'factory/BannerItemFactory.dart';
class BannerViewPage extends StatefulWidget {
 @override
 _BannerViewPageState createState() => new _BannerViewPageState();
}
class _BannerViewPageState extends State<BannerViewPage> {
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
  body:
   new Container(
   child: new Column(
    children: <Widget>[
    new Container(
     alignment: Alignment.center,
     height: 200.0,
     child: this._bannerView0(),
     padding: EdgeInsets.only(bottom: 10.0),
    )
    ],
   ),
   ),
  );
 }
 /**
 * 第一種方式
 */
 BannerView _bannerView0() {
 // 盛放圖片的 List
 List<Pair<String, Color>> param = [
  Pair.create('https://p5.ssl.qhimg.com/dm/456_209_/t01f43c5849ef5f521a.jpg', Colors.red[500]),
  Pair.create('https://p.ssl.qhimg.com/t0171bb61911ebe8899.jpg', Colors.green[500]),
  Pair.create('https://p.ssl.qhimg.com/t01ee77978d3a95a3ae.jpg', Colors.blue[500]),
 ];
 return new BannerView(
  BannerItemFactory.banners(param),
 );
// return new BannerView(
//  BannerItemFactory.banners(param),
//  indicatorMargin: 10.0,
//  indicatorNormal: new Container(
//  width: 5.0,
//  height: 5.0,
//  decoration: new BoxDecoration(
//   color: Colors.green,
//   shape: BoxShape.rectangle,
//  ),
//  ),
//  indicatorSelected: new Container(
//  width: 15.0,
//  height: 5.0,
//  decoration: new BoxDecoration(
//   color: Colors.black,
//   shape: BoxShape.rectangle,
//   borderRadius: new BorderRadius.all(
//   new Radius.circular(5.0),
//   ),
//  ),
//  ),
//  indicatorBuilder: (context, indicator) {
//  Widget cc = new Container(
//   padding: new EdgeInsets.symmetric(horizontal: 20.0,),
//   height: 44.0,
//   width: double.infinity,
//   color: Colors.grey[300],
//   child: indicator,
//  );
//  return new Opacity(
//   opacity: 0.5,
//   child: cc,
//  );
//  },
// );
 }
 /**
 * 第二種方式
 */
 BannerView _bannerView() {
 var pre = 'https://raw.githubusercontent.com/yangxiaoweihn/Assets/master';
 List<Pair<String, Color>> param = [
  Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/cars/car_0.jpg', Colors.red[100]),
  Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/cartoons/ct_0.jpg', Colors.green[100]),
  Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/pets/cat_1.jpg', Colors.blue[100]),
  Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/scenery/s_1.jpg', Colors.yellow[100]),
  Pair.create('https://raw.githubusercontent.com/yangxiaoweihn/Assets/master/cartoons/ct_1.jpg', Colors.red[100]),
//  Pair.create('$pre/cartoons/ct_1.jpg', Colors.red[100]),
 ];
 return new BannerView(
  BannerItemFactory.banners(param),
  indicatorMargin: 10.0,
  indicatorNormal: new Container(
  width: 5.0,
  height: 5.0,
  decoration: new BoxDecoration(
   color: Colors.green,
   shape: BoxShape.rectangle,
  ),
  ),
  indicatorSelected: new Container(
  width: 15.0,
  height: 5.0,
  decoration: new BoxDecoration(
   color: Colors.black,
   shape: BoxShape.rectangle,
   borderRadius: new BorderRadius.all(
   new Radius.circular(5.0),
   ),
  ),
  ),
  indicatorBuilder: (context, indicator) {
  Widget cc = new Container(
   padding: new EdgeInsets.symmetric(horizontal: 20.0,),
   height: 44.0,
   width: double.infinity,
   color: Colors.grey[300],
   child: indicator,
  );
  return new Opacity(
   opacity: 0.5,
   child: cc,
  );
  },
 );
 }
}

總結

以上所述是小編給大家介紹的Flutter banner_view 輪播圖的使用及實現(xiàn)代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章:

Android App中ViewPager所帶來的滑動沖突問題解決方法
Android中我們經(jīng)常使用ViewPager配合Fragment實現(xiàn)視圖滑動,但在實際操作中又會經(jīng)常發(fā)生方向上的沖突問題,這里我們就來總結一下Android App中ViewPager所帶來的滑動沖突問題解決方法:
2016-06-06
android實現(xiàn)簡單的乘法計算代碼
本文完成輸入2個數(shù)相乘，并顯示其結果。共涉及到4個控件的使用學習，輸入數(shù)字采用EditText，顯示結果用TextView，運算按鈕button以及菜單中的退出鍵
2013-11-11
Android自定義EditText實現(xiàn)登錄界面
這篇文章主要為大家詳細介紹了Android自定義EditText實現(xiàn)登錄界面，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-12-12
Android獲取監(jiān)聽SD卡狀態(tài)
本篇文章主要介紹了Android獲取監(jiān)聽SD卡狀態(tài)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
Android整理好的圖片壓縮工具類
今天小編就為大家分享一篇關于Android整理好的圖片壓縮工具類，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2018-12-12
Android Studio 3.0中mipmap-anydpi-v26是什么東東
在Android Studio 3.0中一旦我們創(chuàng)建了一個項目，一個名為mipmap-anydpi-v26自動創(chuàng)建的文件夾在res文件夾下。它究竟能干什么？為什么我們需要這個？我們在開發(fā)時該如何利用它，下面通過本文給大家介紹下
2017-12-12
Android ActionBarActivity設置全屏無標題的方法總結
這篇文章主要介紹了Android ActionBarActivity設置全屏無標題的相關資料,需要的朋友可以參考下
2017-07-07
Android EditText常用屬性功能匯總
這篇文章主要介紹了Android EditText常用屬性功能,較為詳細的匯總分析了Android開發(fā)中EditText控件的常用屬性的功能與具體用法,需要的朋友可以參考下
2016-06-06
Android編程使用AlarmManager設置鬧鐘的方法
這篇文章主要介紹了Android編程使用AlarmManager設置鬧鐘的方法,結合具體實例分析了Android基于AlarmManager實現(xiàn)鬧鐘功能的設置、取消、顯示等相關操作技巧,需要的朋友可以參考下
2017-03-03
android按行讀取文件內(nèi)容的幾個方法
這篇文章主要介紹了android按行讀取文件內(nèi)容的幾個方法,java逐行讀取文件內(nèi)容的幾個方法,需要的朋友可以參考下
2014-06-06