Flutter 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,
  );
  },
 );
 }
}