列表中的卡片

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 9 课，共 33 课。

Card 是一个圆角面板，带有柔和的阴影，看起来像是从屏幕上凸起。它会将里面的内容组合在一起，让列表中的每个项目都成为一个整体。

Card(
  child: ListTile(
    leading: Icon(Icons.flight),
    title: Text('Paris'),
    subtitle: Text('France, May 3'),
  ),
)

卡片周围会留出少量边距，因此列表中的卡片彼此分开。margin: 可以调整边距，color: 可以改变卡片颜色，elevation: 可以加深阴影。

Card 中的 ListTile 是 Flutter 应用中最常见的组件之一：你可以把它想成订单、消息或旅行行程的列表。

挑战

简单

巴黎之旅显示在一张卡片上。也把京都和利马之旅放在卡片上，每个行程各用一张卡片。

亲手试试

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('My Trips')),
        body: ListView(
          padding: const EdgeInsets.all(8),
          children: [
            Card(
              child: ListTile(
                leading: const Icon(Icons.flight),
                title: const Text('Paris'),
                subtitle: const Text('France, May 3'),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.flight),
              title: const Text('Kyoto'),
              subtitle: const Text('Japan, June 12'),
            ),
            ListTile(
              leading: const Icon(Icons.flight),
              title: const Text('Lima'),
              subtitle: const Text('Peru, August 20'),
            ),
          ],
        ),
      ),
    );
  }
}