flutter 轮播图
Posted pp-pping
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了flutter 轮播图相关的知识，希望对你有一定的参考价值。
代码：
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,
),
);
}
}
总结：
轮播图控件 flutter_swiper
先在pubspec.yaml导入flutter_swiper
和 list 用法差不多
Swiper(
itemBuilder:(BuildContext context, int index){
return xxx//xx是控件 一般是Image
}
itemCount : //个数
pagination:SwiperPagination();//索引元素
autoplay：//是否自动滚动
height://高度
)
以上是关于flutter 轮播图的主要内容，如果未能解决你的问题，请参考以下文章