面试题：Flutter利用Container构建自定义可复用列表项组件

Question

假设你要使用Container构建一个可复用的列表项自定义组件，每个列表项包含一个图片、标题和描述信息。图片在左边，标题和描述信息在右边且垂直排列。要求组件可以自适应不同屏幕尺寸，简述实现思路并写出核心代码。

Answer 1

实现思路

1. 使用 Container 作为根组件，将其设置为水平布局，以便图片在左，文本信息在右。
2. 对于图片，可以使用 Image 组件，并设置合适的 width 和 height 以适应不同屏幕尺寸，例如使用 BoxFit 来控制图片的缩放方式。
3. 对于标题和描述信息，使用 Column 组件将它们垂直排列，同时设置合适的字体大小和间距，也可以使用 Flexible 组件来确保文本在不同屏幕尺寸下合理布局。

核心代码（以 Flutter 为例）

import 'package:flutter/material.dart';

class CustomListItem extends StatelessWidget {
  final String imageUrl;
  final String title;
  final String description;

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

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Image.network(
            imageUrl,
            width: 60,
            height: 60,
            fit: BoxFit.cover,
          ),
          const SizedBox(width: 16),
          Flexible(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 8),
                Text(
                  description,
                  style: const TextStyle(fontSize: 14),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

使用方式：

CustomListItem(
  imageUrl: 'https://example.com/image.jpg',
  title: '示例标题',
  description: '这是一段示例描述信息',
)