介绍

Card组件是卡片组件，内容可以由列表的widget组成，Card组件具有阴影圆角的功能。

参数列表

• elevation：设置阴影圆角
• margin：设hi外边距
• child: 设置子组件

一个图文卡片

import 'package:flutter/material.dart';

main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "cart",
      home: Scaffold(
        appBar: AppBar(title: Text("Cart")),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ListView(
        children: [
          Card(
              margin: EdgeInsets.all(20),
              child: Column(
                children: [
                  Image.network(
                      "http://pic.51yuansu.com/pic3/cover/00/71/58/58b052f26a80b_610.jpg"),
                  ListTile(
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage("http://pic.51yuansu.com/pic/cover/00/18/09/57a834a0d86d0_610.jpg"),
                    ),
                    title: Text("梅花"),
                    subtitle: Text("梅花香自苦寒来"),
                  )
                ],
              )),
          Card(
              margin: EdgeInsets.all(20),
              child: Column(
                children: [
                  Image.network(
                      "http://pic.51yuansu.com/pic3/cover/00/71/58/58b052f26a80b_610.jpg"),
                  ListTile(
                    leading: ClipOval(
                      child: Image.network(
                          "http://pic.51yuansu.com/pic/cover/00/18/09/57a834a0d86d0_610.jpg",
                          width: 50,
                          height: 50,
                          fit: BoxFit.cover),
                    ),
                    title: Text("梅花"),
                    subtitle: Text("梅花香自苦寒来"),
                  )
                ],
              )),
              Card(
              margin: EdgeInsets.all(20),
              child: Column(
                children: [
                  Image.network(
                      "http://pic.51yuansu.com/pic3/cover/00/71/58/58b052f26a80b_610.jpg"),
                  ListTile(
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage("http://pic.51yuansu.com/pic/cover/00/18/09/57a834a0d86d0_610.jpg"),
                    ),
                    title: Text("梅花"),
                    subtitle: Text("梅花香自苦寒来"),
                  )
                ],
              )),
              Card(
              margin: EdgeInsets.all(20),
              child: Column(
                children: [
                  Image.network(
                      "http://pic.51yuansu.com/pic3/cover/00/71/58/58b052f26a80b_610.jpg"),
                  ListTile(
                    leading: ClipOval(
                      child: Image.network(
                          "http://pic.51yuansu.com/pic/cover/00/18/09/57a834a0d86d0_610.jpg",
                          width: 50,
                          height: 50,
                          fit: BoxFit.cover),
                    ),
                    title: Text("梅花"),
                    subtitle: Text("梅花香自苦寒来"),
                  )
                ],
              )),
        ],
      ),
    );
  }
}

image.png

在使用图片作为头像时，CircleAvatar组件似乎比ClipOval更加合适。