面试题：Flutter中如何通过Widget组合实现一个可复用的卡片组件

Question

在Flutter开发中，要求你通过Widget组合的方式实现一个通用的卡片组件，卡片需要包含标题、内容描述以及一个可点击的按钮。请简述实现思路并给出关键代码示例。

Answer 1

实现思路

1. 创建一个自定义的StatelessWidget来代表卡片组件。
2. 在该组件中，使用Column来垂直排列标题、内容描述和按钮。
3. 分别使用Text组件显示标题和内容描述。
4. 使用ElevatedButton或其他按钮组件实现可点击按钮，并为其添加点击事件处理逻辑。

关键代码示例

import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  final String title;
  final String description;
  final VoidCallback onButtonPressed;

  const CustomCard({
    Key? key,
    required this.title,
    required this.description,
    required this.onButtonPressed,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 8),
            Text(description),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: onButtonPressed,
              child: const Text('点击我'),
            ),
          ],
        ),
      ),
    );
  }
}

使用示例：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('自定义卡片示例'),
      ),
      body: Center(
        child: CustomCard(
          title: '卡片标题',
          description: '这是卡片的内容描述',
          onButtonPressed: () {
            print('按钮被点击了');
          },
        ),
      ),
    );
  }
}