Flutter ListView + Card + AspectRatio 实现的列表
一、列表效果
主要使用的 Widget:
- ListView
- Card
- AspectRatio
二、 Widget 的构建
1、Card + AspectRatio 组成的子项
class CardItem2 extends StatelessWidget {
CardItem2({
this.title,
this.subTitle,
this.cover,
});
final String title;
final String subTitle;
final String cover;
@override
Widget build(BuildContext context) {
return Card(
child: Column(
children: <Widget>[
AspectRatio(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(this.cover),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.vertical(
top: Radius.circular(4),
),
),
),
aspectRatio: 16 / 9,
),
ListTile(
title:
Text(this.title, maxLines: 1, overflow: TextOverflow.ellipsis),
subtitle: Text(this.subTitle,
maxLines: 1, overflow: TextOverflow.ellipsis),
leading: ClipOval(
child: CircleAvatar(backgroundImage: NetworkImage(this.cover)),
),
)
],
),
margin: EdgeInsets.all(10),
);
}
}
这里的坑还是在于图片会将 Card Widget 的圆角遮盖住,因此需要特殊处理下图片的圆角:
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(this.cover),
fit: BoxFit.cover,
),
borderRadius: BorderRadius.vertical(
top: Radius.circular(4),
),
2、构造列表
子项构造 OK 构造列表就简单了,这里还是使用 ListView.builder
构造列表:
class HomeContent extends StatelessWidget {
Widget buildItem(BuildContext context, int index) {
Map news = newsList.news[index];
return CardItem2(
title: news['title'],
subTitle: news['docurl'],
cover: news['imgurl'],
);
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: newsList.news.length,
itemBuilder: buildItem,
);
}
}
三、代码
1、AspectRatio demo
https://github.com/postbird/FlutterHelloWorldDemo/blob/master/demo1/lib/bak/main.21-AspectRatio.dart
2、列表
文章已经结束啦
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/flutter-listivew-card-aspectRatio.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!