flutter中利用Swiper实现轮播并加入listview实现类豆瓣电影列表页
本文将实现如下图所示的页面:整体布局上通过column包括两部分内容;(包括:上部分的轮播图的实现+下半部分listview实现数据的展示(自定义itemview))第一部分:Swiper实现轮播图:flutter可通过第三方插接快速实现界面功能的开发,例如swiper轮播图的实现:步骤如下:1 在pubspec文件中加入必要的插件名称,通过提示同步获取到第三方的库文件。2 创建轮...
·
本文将实现如下图所示的页面:
整体布局上通过column包括两部分内容;
(包括:上部分的轮播图的实现+下半部分listview实现数据的展示(自定义itemview))
第一部分:Swiper实现轮播图:
flutter可通过第三方插接快速实现界面功能的开发,例如swiper轮播图的实现:
步骤如下:
1 在pubspec文件中加入必要的插件名称,通过提示同步获取到第三方的库文件。
2 创建轮播资源和轮播布局,核心代码如下;
Container(
height: 200,
child: Swiper(
pagination: //添加标记码
SwiperPagination(alignment: Alignment.bottomCenter),
autoplay: true,//设置自动播放
itemCount: imageUrls.length, //设置item的个数
itemBuilder: (BuildContext context, int index) { //设置item的内容
return Image.asset(
imageUrls[index],
fit: BoxFit.fill,
);
},
),
),
3: 准备单个listitem的布局:
通过定义一个方法 设置具体的item布局,返回值类型为card,方便在listview中添加:
Card getitem() {
var row = Container(
margin: EdgeInsets.all(4.0),
child: Row(
children: <Widget>[
ClipRRect(
//裁剪一个矩形图片
borderRadius: BorderRadius.circular(4.0),
child: Image.asset(
"images/img06.png",
width: 100,
height: 150,
fit: BoxFit.fill,
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 8),
height: 150,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'妇联者仇盟',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
Text(
"豆瓣评分:5分",
style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
),
Text(
"类型:动作,悬疑,冒险",
style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
),
Text(
"导演:张磊",
style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("主演:"),
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'images/mc4.jpg',
height: 50,
width: 50,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'images/mc5.jpg',
height: 50,
width: 50,
),
),
],
)
],
),
))
],
),
);
return Card(
child: row,
);
}
4 添加listview:
ListView(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(10),
children: <Widget>[
getitem(),
],
),
完整代码如下:
class TestSwiper2 extends StatefulWidget {
//反复调用createstate方法 用于更新build中的widget
@override
_TestSwiperState createState() {
return _TestSwiperState();
}
}
class _TestSwiperState extends State<TestSwiper2> {
//声明一个list用于存放图片
List<Widget> images = List();
List<String> imageUrls = List();
//初始化数据:
//@override
void initState() {
images.add(Image.asset(
"images/img01.jpg",
fit: BoxFit.fill,
));
images.add(Image.asset("images/img02.jpg", fit: BoxFit.fill));
images.add(Image.asset("images/img03.jpg", fit: BoxFit.fill));
images.add(Image.asset("images/img04.jpg", fit: BoxFit.fill));
images.add(Image.asset("images/img05.jpg", fit: BoxFit.fill));
imageUrls.add("images/img02.jpg");
imageUrls.add("images/img03.jpg");
imageUrls.add("images/img04.jpg");
//super.initState();
}
//build方法表示在其中创建对应的布局 返回一个widget对象
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("轮播图"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
height: 200,
child: Swiper(
pagination: //添加标记码
SwiperPagination(alignment: Alignment.bottomCenter),
autoplay: true, //设置自动播放
itemCount: imageUrls.length, //设置item的个数
itemBuilder: (BuildContext context, int index) {
//设置item的内容
return Image.asset(
imageUrls[index],
fit: BoxFit.fill,
);
},
),
),
Expanded(
child: ListView(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(10),
children: <Widget>[
getitem(),
],
),
)
],
),
));
}
Card getitem() {
var row = Container(
margin: EdgeInsets.all(4.0),
child: Row(
children: <Widget>[
ClipRRect(
//裁剪一个矩形图片
borderRadius: BorderRadius.circular(4.0),
child: Image.asset(
"images/img06.png",
width: 100,
height: 150,
fit: BoxFit.fill,
),
),
Expanded(
child: Container(
margin: EdgeInsets.only(left: 8),
height: 150,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'妇联者仇盟',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
Text(
"豆瓣评分:5分",
style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
),
Text(
"类型:动作,悬疑,冒险",
style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
),
Text(
"导演:张磊",
style: TextStyle(fontSize: 15, fontWeight: FontWeight.normal),
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text("主演:"),
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'images/mc4.jpg',
height: 50,
width: 50,
),
),
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Image.asset(
'images/mc5.jpg',
height: 50,
width: 50,
),
),
],
)
],
),
))
],
),
);
return Card(
child: row,
);
}
}
更多推荐



所有评论(0)