Flutter Card组件学习
1、Card
1.1、属性
属性 | 说明 |
---|---|
margin | 外边距,EdgeInsets.all(10) |
child | 子组件 |
Shape | Card 的阴影效果,默认的阴影效果为圆角的 长方形边。 |
1.2、代码
实现ListView中包含 Card
lib/res/listData.dart中
List listData = [
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/1.png',
"detail":
'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
},
{
"title": 'Alibaba Shop',
"author": 'Alibaba',
"imageUrl": 'https://www.itying.com/images/flutter/3.png',
"detail":
'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
},
{
"title": 'Candy Shop',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/4.png',
"detail":
'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
},
{
"title": 'Tornado',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/5.png',
"detail":
'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
},
{
"title": 'Undo',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/6.png',
"detail":
'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
},
{
"title": 'white-dragon',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/7.png',
"detail":
'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
},
{
"title": 'white-dragon',
"author": 'Mohamed Chahin',
"imageUrl": 'https://www.itying.com/images/flutter/7.png',
"detail":
'hkjhxn gooe djkfldj n bjn hkalhjfsmx xxx kfldjfdkl xxjlkj xxjdlkjfd lxjlkni h',
},
];
MyCardView
import 'package:flutter/material.dart';
//引用数据文件
import 'package:flutter_app/res/listData.dart';
class MyCardView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text(
'小明',
style: TextStyle(fontSize: 26),
),
subtitle: Text('java 工程师')),
ListTile(
title: Text(
'电话: xxxxxxxxx',
)),
ListTile(
title: Text(
'住址: xxxxxxxxx',
)),
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text(
'小明',
style: TextStyle(fontSize: 26),
),
subtitle: Text('java 工程师')),
ListTile(
title: Text(
'电话: xxxxxxxxx',
)),
ListTile(
title: Text(
'住址: xxxxxxxxx',
)),
],
),
),
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
ListTile(
title: Text(
'小明',
style: TextStyle(fontSize: 26),
),
subtitle: Text('java 工程师')),
ListTile(
title: Text(
'电话: xxxxxxxxx',
)),
ListTile(
title: Text(
'住址: xxxxxxxxx',
)),
],
),
)
],
);
}
}
//List中使用Card显示一张图片,一个头像,一个title,一个subTitle
class MyCardView2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
Card(
margin: EdgeInsets.all(10),
child: Column(
children: <Widget>[
AspectRatio(
aspectRatio: 20 / 9,
child: Image.network(
"https://www.itying.com/images/flutter/3.png",
fit: BoxFit.cover,
),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(
"https://www.itying.com/images/flutter/3.png"),
),
title: Text("xxxxxx"),
subtitle: Text("xxxxxxxx"),
)
],
),
)
],
);
}
}
// 动态加载ListView 中的数据
class MyCardView3 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: 20 / 9,
child: Image.network(
value["imageUrl"],
fit: BoxFit.cover,
),
),
ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(value["imageUrl"]),
),
title: Text(value['title']),
subtitle: Text(
value['detail'],
// 设置超过一行后,使用。。。
overflow: TextOverflow.ellipsis,
),
)
],
),
);
}).toList(),
);
}
}