待办事项列表：添加任务

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

无法添加任务的待办列表就像一张海报。在列表上方的 Row 中放置一个输入框和一个圆形添加按钮。

输入框需要一个 TextEditingController，这样添加按钮就能读取输入的内容。添加分为两步：在 setState 中将一个新的 Task 添加到列表中，这样列表就会重新绘制；然后清空输入框，以便输入下一个任务：

void _addTask() {
  setState(() {
    _tasks.add(Task(_controller.text));
  });
  _controller.clear();
}

现在，列表和输入框共享屏幕空间。在 Column 中的 ListView 外面需要套上一个 Expanded，这样它就会占用剩余空间，而不是要求占用全部空间。

IconButton.filled 是一个位于主题色填充圆形上的 IconButton，外观就像 Material 3 中的主要操作按钮。

挑战

中等

从输入框添加任务：

为状态创建一个名为 TextEditingController 的 _controller（并释放它）
将 body 设为 Column：先放一个带 16 像素内边距的 Row，其中包含一个 Expanded TextField，标签为 New task，以及一个带 Icons.add 的 IconButton.filled，然后将列表放在 Expanded 中
点击按钮后，将输入的任务添加到列表末尾，并清空输入框

亲手试试

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(),
    );
  }
}

class Task {
  Task(this.title);

  final String title;
}

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

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

class _TodoScreenState extends State<TodoScreen> {
  final List<Task> _tasks = [Task('Buy milk'), Task('Walk the dog'), Task('Read a book')];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My Tasks')),
      body: ListView.builder(
        itemCount: _tasks.length,
        itemBuilder: (context, index) {
          final task = _tasks[index];
          return ListTile(
            title: Text(task.title),
          );
        },
      ),
    );
  }
}