7、Flutter banner_view 輪播圖的使用

1、前言

實現輪播圖，效果如下：

2、實現

將采用?banner_view 實現：資源庫地址

2.1、yaml 引入依賴

在 pubspec.yaml 聲明需要引用的庫，執行命令 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> {@overrideWidget 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() {// 盛放圖片的 ListList<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,);},);} }

?

posted @ 2019-01-26 15:58 niceyoo 閱讀(...) 評論(...) 編輯 收藏 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的7、Flutter banner_view 轮播图的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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