AspectRatio组件
属性 |
释义 |
aspectRatio |
宽高比(参考值) |
AspectRatio使用
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Container(
width: 200,
child: AspectRatio(
aspectRatio: 2.0/1.0, //
child: Container(
color: Colors.red,
),
),
);
}
}
Card组件
属性 |
释义 |
margin |
外边距 |
Shape |
Card的阴影效果,默认的阴影效果为圆角的长方形边 |
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text("w", style: TextStyle(fontSize: 28),),
subtitle: Text("wwwwwwwww"),
),
Divider(),
ListTile(
title: Text("phone", style: TextStyle(fontSize: 28),),
subtitle: Text("wwwwwwwww"),
),
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text("w", style: TextStyle(fontSize: 28),),
subtitle: Text("wwwwwwwww"),
),
Divider(),
ListTile(
title: Text("phone", style: TextStyle(fontSize: 28),),
subtitle: Text("wwwwwwwww"),
),
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text("w", style: TextStyle(fontSize: 28),),
subtitle: Text("wwwwwwwww"),
),
Divider(),
ListTile(
title: Text("phone", style: TextStyle(fontSize: 28),),
subtitle: Text("wwwwwwwww"),
),
],
),
)
],
);
}
}
eg: 图文Card示例:
class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return ListView(
children: listData.map((value){
return Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 20/9,
child: Image.network(value["imageUrl"], fit: BoxFit.cover,),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(value["imageUrl"]),
),
title: Text(value["title"]),
subtitle: Text(value["author"]),
)
],
),
);
}).toList(),
);
}
}