介紹

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更加合適。