代码:
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://高度
)
原文地址:https://www.cnblogs.com/pp-pping/p/12222390.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。