1、在dart库中搜索fluuter_swiper并按教程配置
2、使用
轮播图的必须包裹有高度的父组件,或者父组件无高宽使用子元素宽高比组件AspectRatio
Container(
child:AspectRatio(
aspectRatio: 2,
child:Swiper(
itemBuilder: (BuildContext context,int index){ //设置轮播图
return new Image.network(imgList[index]["url"],fit: BoxFit.fill,);
},
itemCount: 3, 遍历的次数
pagination: new SwiperPagination(), 底部圆点
control: new SwiperControl(), 左右箭头
autoplay: true, 自动播放
duration: 2000, 间隔时间
onTap: (index){}, 点击回调
onIndexChanged: (index){}, 切换回调
)
)
),
代码示例:
import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:flutter_cupertino_date_picker/flutter_cupertino_date_picker.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class Home4 extends StatefulWidget {
Home4({Key key}) : super(key: key);
@override
_Home2State createState() => _Home2State();
}
class _Home2State extends State<Home4> {
@override
void initState() {
super.initState();
}
List<Map> imgList=[
{
'url':'https://i0.hdslb.com/bfs/sycp/creative_img/202004/7d041c7a2cf16c5f6d67072782088dc2.jpg',
},
{
'url':'http://i0.hdslb.com/bfs/archive/a14074d43490aae4d363bde491c1d885fb76d224.png@880w_388h_1c_95q'
},
{
'url':"http://i0.hdslb.com/bfs/archive/08e1a548cabe9afbb992e8a8078a4bebe68b47be.png@880w_388h_1c_95q"
}
];
@override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
child:AspectRatio(
aspectRatio: 2,
child:Swiper(
itemBuilder: (BuildContext context,int index){
return new Image.network(imgList[index]["url"],fit: BoxFit.fill,);
},
itemCount: 3,
pagination: new SwiperPagination(), //底部圆点
control: new SwiperControl(), //左右箭头
autoplay: true,
duration: 2000,
onTap: (index){},
onIndexChanged: (index){},
),
)
),
]),
);
}
}
// 因为表单组件需要改变状态,所以要使用有状态组件
/*
轮播图必须外包一层有高度的父容器或者使用子元素宽高比组件AspectRatio
*/