AspectRatio
class HomeContext extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 3 / 1,
child: Container(
color: Colors.cyan,
),
);
}
}
Card
class HomeContext extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text('张三'),
subtitle: Text('软件工程师'),
),
ListTile(
title: Text('电话:xxxxxx'),
),
ListTile(
title: Text('地址:xxxxxx'),
),
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text('李四'),
subtitle: Text('软件工程师'),
),
ListTile(
title: Text('电话:xxxxxx'),
),
ListTile(
title: Text('地址:xxxxxx'),
),
],
),
)
],
);
}
}
class HomeContext extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 16/9,
child: Image.network('http://5b0988e595225.cdn.sohucs.com/images/20171108/e8d0b0ab35b14b33a499d74cbc52b43c.jpeg',fit: BoxFit.cover,),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage('http://5b0988e595225.cdn.sohucs.com/images/20171108/ba1b73bec9784b9eae4416226abcddc7.jpeg'),
),
title: Text('xxxx'),
subtitle: Text('xxxxxxxxxx'),
)
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 16/9,
child: Image.network('http://5b0988e595225.cdn.sohucs.com/images/20171108/d29a69f9c7fc41d1aae4516df8ebfac3.jpeg',fit: BoxFit.cover,),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage('http://5b0988e595225.cdn.sohucs.com/images/20171108/d29a69f9c7fc41d1aae4516df8ebfac3.jpeg'),
),
title: Text('xxxx'),
subtitle: Text('xxxxxxxxxx'),
)
],
),
),
],
);
}
}
使用指定数据
class HomeContext extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: listData.map((value){
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 16/9,
child: Image.network(value['imgUrl'],fit: BoxFit.cover,),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(value['imgUrl']),
),
title: Text(value['title']),
subtitle: Text(value['describe'],maxLines: 2,overflow: TextOverflow.ellipsis,),
)
],
),
);
}).toList(),
);
}
}