这个轮播组件 有点 有参考意义 贴出来 玩玩
installation 安装
在你的 pubspec.yaml 中添加 carousel_slider: ^0.0.7
carousel_slider: ^0.0.7
Used 使用
First:import package in your widget
import 'package:carousel_slider/carousel_slider.dart';
Seconed:
你可能需要一个容器将他放进去,比如 一个Center、Container或者 其他。
new CarouselSlider(
items: [1,2,3,4,5].map((i) {
return new Builder(
builder: (BuildContext context) {
return new Container(
width: MediaQuery.of(context).size.width,
margin: new EdgeInsets.symmetric(horizontal: 5.0),
decoration: new BoxDecoration(
color: Colors.amber
),
child: new Text('text $i', style: new TextStyle(fontSize: 16.0),)
);
},
);
}).toList(),
height: 400.0,
autoPlay: true
)
简单调用Demo
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("Page2"),
),
body: new CarouselSlider(
items: [1,2,3,4,5].map((i) {
return new Builder(
builder: (BuildContext context) {
return new Container(
width: MediaQuery.of(context).size.width,
margin: new EdgeInsets.symmetric(horizontal: 5.0),
decoration: new BoxDecoration(
color: Colors.amber
),
child: new Image.network(
'http://i2.yeyou.itc.cn/2014/huoying/hd_20140925/hyimage06.jpg',
fit: BoxFit.fill,
)
);
},
);
}).toList(),
height: 180.0,
autoPlay: true
)
);
}
}
网友评论