代码：
import 'package:flutter/material.dart'; import '../service/service_method.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; import 'dart:convert'; class SwiperDemo extends StatelessWidget { const SwiperDemo({Key key}) : super(key: key);@override Widget build(BuildContext context) { return Container( child: FutureBuilder(//网络数据返回能很好的渲染控件 future: getHomePageContent(),//网络返回的数据 builder: (context,snapshot){ if (snapshot.hasData) {//snapshot 相当于返回的数据 var data = json.decode(snapshot.data.toString()); List<Map> swiper = (data['data']['slides'] as List).cast(); return Column( children: <Widget>[ SwiperDiy(swiperDataList: swiper) ], ); }else{ return Center( child: Text('加载错误'), ); } }, ), ); } }
//轮播图 class SwiperDiy extends StatelessWidget { final List swiperDataList; SwiperDiy({this.swiperDataList});//可以省去:super（key : key） @override Widget build(BuildContext context) { return Container( height: 200.0, child: Swiper( itemBuilder: (BuildContext context, int index){ return Image.network("${swiperDataList[index]['image']}",fit: BoxFit.fill,); }, itemCount: swiperDataList.length, pagination: SwiperPagination(),//下面的索引元素 autoplay: true, ), ); } } 总结： <style></style>
轮播图控件 flutter_swiper
先在pubspec.yaml导入flutter_swiper
和 list 用法差不多
Swiper(
itemBuilder:(BuildContext context, int index){
return xxx//xx是控件 一般是Image
}
itemCount : //个数
pagination:SwiperPagination();//索引元素
autoplay：//是否自动滚动
height://高度
)
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。