image.png
這個(gè)輪播組件 有點(diǎn) 有參考意義 貼出來 玩玩
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:
你可能需要一個(gè)容器將他放進(jìn)去鬼店，比如 一個(gè)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
)
簡單調(diào)用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
)
);
}
}
