https://api.flutter.dev/flutter/material/Card-class.html
一个 Material Design 卡片。拥有一个圆角和阴影。定义如下:

  1. Card({
  2. Key key,
  3. this.color,
  4. this.shadowColor,
  5. this.elevation,
  6. this.shape,
  7. this.borderOnForeground = true,
  8. this.margin,
  9. this.clipBehavior,
  10. this.child,
  11. this.semanticContainer = true,
  12. })

示例1:

image.png

  1. ListView(
  2. children: [
  3. Card(
  4. margin: EdgeInsets.all(10),
  5. child: Column(
  6. crossAxisAlignment: CrossAxisAlignment.start,
  7. children: [
  8. ListTile(
  9. title: Text('张三', style: TextStyle(fontSize: 28)),
  10. subtitle: Text('高级软件工程师'),
  11. ),
  12. ListTile(
  13. title: Text('电话:13432143434'),
  14. ),
  15. ListTile(
  16. title: Text('地址:******'),
  17. ),
  18. ],
  19. ),
  20. ),
  21. ],
  22. );

示例2:

image.png

  1. ListView(
  2. children: [
  3. Card(
  4. margin: EdgeInsets.all(10),
  5. child: Column(
  6. children: [
  7. AspectRatio(
  8. aspectRatio: 16 / 9,
  9. child: Image.network(
  10. 'https://img.pic88.com/preview/2020/09/02/1599056029788949.jpg',
  11. fit: BoxFit.cover,
  12. ),
  13. ),
  14. ListTile(
  15. leading: CircleAvatar(
  16. backgroundImage: NetworkImage(
  17. 'https://img.pic88.com/preview/2020/09/02/1599056029788949.jpg',
  18. ),
  19. ),
  20. title: Text('张三'),
  21. subtitle: Text('高级软件工程师'),
  22. ),
  23. ],
  24. ),
  25. ),
  26. ],
  27. );