(一)效果图
(二)实现要点:
card组件
图片比例 AspectRatio
图片填充 fit:BoxFit.cover
圆形头像 ClipOval(可以参考以前的头像实现的博客链接: [link](链接: link.)
ListView实现列表
(三)代码实现
我们用上一篇博客(链接: link.)的模板代码给大家做一个演示:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('甜宠软妹'),
centerTitle: true,
),
body: Carddemo(),
));
}
}
class Carddemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),//外边距
child: Column(//纵向排列组件
children: <Widget>[
AspectRatio(//图片比例属性
aspectRatio: 16 / 13,
child: Image.asset(//引入本地图片
"images/master.jpg",
fit: BoxFit.cover,//填充整个容器
),
),
ListTile(
leading: ClipOval(//头像位置及图片圆形属性
child: Image.asset(
"images/mouse1.jpg",
fit: BoxFit.cover,
height: 60,
width: 60,
)),
title: Text("master", style: TextStyle(fontSize: 28)),
subtitle: Text("是最帅的", style: TextStyle(fontSize: 18)),
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
leading: ClipOval(child: Image.asset("images/mouse2.jpg")),
title: Text("你会永远对我好", style: TextStyle(fontSize: 20)),
)
],
)),
],
);
//例子
// return ListView(
// children: <Widget>[
// Card(
// margin: EdgeInsets.all(10),
// child: Column(
// children: <Widget>[
// ListTile(
// title: Text("master",style: TextStyle(
// fontSize: 28
// ),
// ),
// subtitle: Text("是最帅的"),
// ),
// ListTile(
// title: Text("电话"
// ),
// ),
// ListTile(
// title: Text("微信"
// ),
// ),
// ],
// ),
// )
// ],
// );
}
}