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(),
);
}
}