Flutter-Card

Widget—Card

  • child 子组件
  • color 背景色
  • shadowColor 阴影色
  • elevation 阴影高度
  • shape 边框样式(可以用RoundedRectangleBorder来设置,意为圆角矩形边框)
  • margin 外边距

Widget—ListTile

  • leading 头部组件
  • title 标题
  • subtitle 副标题

代码区

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class MyPage extends StatelessWidget {
const MyPage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Column(
children: [
Card(
margin: const EdgeInsets.all(30),//外边距
shadowColor: Colors.black,//阴影颜色
elevation: 20,//阴影高度
shape: const RoundedRectangleBorder(//圆角矩形边框
borderRadius: BorderRadius.all(Radius.circular(10)),//圆弧
side: BorderSide(color: Colors.lightBlueAccent)//边,亮色蓝
),
child: Column(//card的子组件,描述信息,多个子组件用Column来包含
children: const [
ListTile(
leading: CircleAvatar(//leading,头部信息,用圆角头像
radius: 30,//大小
backgroundImage: NetworkImage('https://img1.imgtp.com/2022/08/23/HgJi7gyB.JPG'),//地址
),
title: Text('Kahvia!'),//标题,这里指人名
subtitle: Text('三峡大学'),//副标题,这里指学校
),
Divider(//分割线
color: Colors.grey,
),
ListTile(//信息1,其实不用这个组件也行的
title: Text('联系方式:1313131313'),
),
ListTile(//信息2
title: Text('QQ:914302063'),
),
],
),
),
],
);
}
}

效果图