待办事项列表：任务列表

本课属于 Coddy Flutter 学习旅程的“项目”单元。第 1 课，共 36 课。

这个单元包含 4 个应用，每次构建一个功能。你已经熟悉每个部分，现在要像制作真正的应用那样把它们组合起来。

第一个应用是待办事项列表。本章结束时，你就能添加任务、勾选完成、滑动删除、撤销删除，还能筛选要查看的内容。

每个应用都从数据开始。目前，任务只是一个标题，所以用一个小类来保存它，而屏幕会在它的 State 中保存任务列表：

class Task {
  Task(this.title);

  final String title;
}

final List<Task> _tasks = [Task('Buy milk')];

ListView.builder 会把这个列表转换成屏幕上的行。它会针对从 0 到 itemCount 前的每个索引调用一次 itemBuilder，每次调用都会返回一个 ListTile。

挑战

简单

显示任务：

编写一个 Task 类，其中包含 final String title 和构造函数 Task(this.title)
在 _TodoScreenState 中，创建一个包含三个任务的列表 _tasks：Buy milk、Walk the dog 和 Read a book
将 body: 中的 Center 替换为 ListView.builder，让它在 ListTile 中显示每个任务的标题

亲手试试

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,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
      home: const TodoScreen(),
    );
  }
}

// 在这里编写 Task 类。

class TodoScreen extends StatefulWidget {
  const TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreenState();
}

class _TodoScreenState extends State<TodoScreen> {
  // 在这里创建任务列表。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: const Center(
        child: Text('Your tasks go here'),
      ),
    );
  }
}