[译] 用 Flutter 写一个待办事项应用

import 'package:flutter/material.dart';
 
void main() => runApp(TodoApp());
 
class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TodoList(),
    );
  }
}
 
class TodoList extends StatefulWidget {
  @override
  _TodoListState createState() => _TodoListState();
}
 
class _TodoListState extends State<TodoList> {
  List<String> todos = [];
 
  void addTodo(String newTodo) {
    setState(() {
      todos.add(newTodo);
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('待办事项'),
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todos[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final newTodo = await showDialog<String>(
            context: context,
            builder: (context) {
              return AlertDialog(
                title: Text('添加待办事项'),
                content: TextField(
                  autofocus: true,
                  onSubmitted: (value) {
                    Navigator.of(context).pop(value);
                  },
                ),
                actions: <Widget>[
                  FlatButton(
                    child: Text('取消'),
                    onPressed: () {
                      Navigator.of(context).pop();
                    },
                  ),
                  FlatButton(
                    child: Text('添加'),
                    onPressed: () {
                      Navigator.of(context).pop(
                        // 这里的代码是假设的，需要根据实际情况来获取输入的值
                        // 实际中应该是通过TextField的控制器来获取输入值
                        // 这里只是为了演示，所以使用固定的字符串
                        '新的待办事项',
                      );
                    },
                  ),
                ],
              );
            },
          );
          if (newTodo != null) {
            addTodo(newTodo);
          }
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

这个代码示例展示了如何使用Flutter创建一个简单的待办事项应用。应用包括一个待办事项列表和一个浮动按钮，可以添加新的待办事项。添加操作通过弹出对话框来实现，用户可以在对话框中输入待办事项，然后点击确认来将其添加到列表中。这个示例简单易懂，适合作为学习Flutter的入门项目。