Flutter任务卡片重构：添加描述与优化卡片间距

一、添加任务描述文本 #

原TaskTile中标题使用Row横向布局，无法实现标题+描述的垂直排列，需调整布局结构：

1. 将标题所在的内层Row替换为Column，设置crossAxisAlignment: CrossAxisAlignment.start保证左对齐；
2. 新增描述文本组件，处理空描述的情况并自定义样式；

修改后的task_tile.dart代码：

class TaskTile extends StatelessWidget {
  const TaskTile({
    Key? key,
    required this.task,
  }) : super(key: key);

  final Task task;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Expanded(
          child: Row(
            children: [
              Expanded(
                // 替换为Column实现标题+描述的垂直布局
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(width: 10),
                    Text(
                      task.title,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: const Color(0xFF89ABE3),
                        fontFamily: 'Source Sans Pro',
                        fontSize: 19,
                        decoration: task.isDone! ? TextDecoration.lineThrough : null,
                      ),
                    ),
                    // 新增任务描述文本，仅当描述非空时显示
                    if (task.description != null && task.description!.isNotEmpty)
                      Padding(
                        padding: const EdgeInsets.only(top: 4),
                        child: Text(
                          task.description!,
                          overflow: TextOverflow.ellipsis,
                          maxLines: 2, // 限制最多显示2行
                          style: TextStyle(
                            color: Colors.grey[600],
                            fontFamily: 'Source Sans Pro',
                            fontSize: 14,
                            decoration: task.isDone! ? TextDecoration.lineThrough : null,
                          ),
                        ),
                      ),
                    const SizedBox(width: 10),
                  ],
                ),
              ),
            ],
          ),
        ),
        Row(
          children: [
            PopupMenu(
              favouriteCallback: () => context.read<TasksBloc>().add(
                    MakeFavouriteTask(task: task),
                  ),
              task: task,
            ),
            Transform.scale(
              scale: 1.2,
              child: Checkbox(
                shape: const CircleBorder(
                  side: BorderSide(
                    width: 20,
                  ),
                ),
                side: const BorderSide(
                  color: Color(0xFF89ABE3),
                ),
                activeColor: Colors.greenAccent,
                value: task.isDone,
                onChanged: task.isDeleted == false
                    ? (value) {
                        context.read<TasksBloc>().add(UpdateTask(task: task));
                      }
                    : null,
              ),
            ),
          ],
        ),
      ],
    );
  }
}

注意：需确保你的Task模型类中包含description字段（如String? description;），若尚未添加需先更新模型。

二、增加任务卡片间距 #

提供两种简单实现方式，按需选择：

方式1：给每个TaskTile添加外边距 #

修改task_list.dart的itemBuilder，为TaskTile包裹Container并设置margin：

class TasksList extends StatelessWidget {
  const TasksList({
    Key? key,
    required this.tasksList,
  }) : super(key: key);

  final List tasksList;

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
      itemCount: tasksList.length,
      itemBuilder: (context, index) {
        var task = tasksList[index];
        // 添加margin实现卡片上下左右间距
        return Container(
          margin: const EdgeInsets.only(bottom: 12),
          child: TaskTile(task: task),
        );
      },
    );
  }
}

方式2：使用ListView的分隔器 #

通过separatorBuilder为列表项之间添加空白分隔：

class TasksList extends StatelessWidget {
  const TasksList({
    Key? key,
    required this.tasksList,
  }) : super(key: key);

  final List tasksList;

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
      padding: const EdgeInsets.only(top: 10),
      itemCount: tasksList.length,
      itemBuilder: (context, index) {
        var task = tasksList[index];
        return TaskTile(task: task);
      },
      // 列表项之间的空白分隔
      separatorBuilder: (context, index) => const SizedBox(height: 12),
    );
  }
}

两种方式效果类似：方式1可灵活控制卡片上下左右的间距，方式2仅控制项与项之间的垂直间距。

内容的提问来源于stack exchange，提问作者漣侑稀