1、前言
实现轮播图，效果如下：
2、实现
将采用 banner_view 实现：资源库地址
2.1、yaml 引入依赖
在 pubspec.yaml 声明需要引用的库，执行命令 flutter packages get 进行拉取即可使用。
banner_view: "^1.1.2"
2.2、代码中引入依赖
在资源库地址下方，作者提供了 banner_view 的几种展示方式。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
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 轮播图的使用及实现代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对服务器之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
原文链接：https://www.cnblogs.com/niceyoo/p/10323686.html
