Dart 语言 待办事项管理示例

Dart阿木 发布于 2025-06-19 5 次阅读


Dart 语言待办事项管理示例:代码与实践

Dart 是 Google 开发的一种面向客户端的编程语言,它可以用于构建高性能的 Web、服务器端和移动应用程序。在 Dart 中,我们可以轻松地创建一个待办事项管理应用,以帮助用户组织和跟踪他们的任务。本文将围绕 Dart 语言,通过一个简单的待办事项管理示例,展示如何使用 Dart 进行应用程序开发。

待办事项管理应用概述

待办事项管理应用通常包含以下功能:

1. 添加待办事项:用户可以添加新的待办事项。

2. 显示待办事项列表:展示所有待办事项。

3. 切换待办事项状态:标记待办事项为完成或未完成。

4. 删除待办事项:从列表中移除待办事项。

以下是一个基于 Dart 的简单待办事项管理应用的实现。

环境准备

在开始编写代码之前,请确保您已经安装了 Dart 和 Dart SDK。您可以从 Dart 官方网站下载并安装 Dart SDK。

创建项目

打开终端或命令提示符,执行以下命令创建一个新的 Dart 项目:

bash

dart create todo_app


cd todo_app


设计数据模型

在 Dart 中,我们可以使用类(Class)来设计数据模型。以下是一个简单的待办事项类:

dart

class Todo {


String id;


String title;


bool isCompleted;

Todo(this.id, this.title, this.isCompleted);

void toggleCompleted() {


isCompleted = !isCompleted;


}


}


创建待办事项列表

接下来,我们需要创建一个待办事项列表,用于存储和管理待办事项:

dart

class TodoList {


List<Todo> todos = [];

void addTodo(Todo todo) {


todos.add(todo);


}

void removeTodo(String id) {


todos.removeWhere((todo) => todo.id == id);


}

List<Todo> getTodos() {


return todos;


}


}


创建用户界面

在 Dart 中,我们可以使用 Flutter 框架来创建用户界面。以下是一个简单的待办事项管理应用的界面:

dart

import 'package:flutter/material.dart';


import 'todo.dart';


import 'todo_list.dart';

void main() {


runApp(MyApp());


}

class MyApp extends StatelessWidget {


@override


Widget build(BuildContext context) {


return MaterialApp(


title: 'Todo App',


theme: ThemeData(


primarySwatch: Colors.blue,


),


home: TodoPage(),


);


}


}

class TodoPage extends StatefulWidget {


@override


_TodoPageState createState() => _TodoPageState();


}

class _TodoPageState extends State<TodoPage> {


final TodoList todoList = TodoList();


final TextEditingController _controller = TextEditingController();

@override


Widget build(BuildContext context) {


return Scaffold(


appBar: AppBar(


title: Text('Todo App'),


),


body: ListView.builder(


itemCount: todoList.getTodos().length,


itemBuilder: (context, index) {


final todo = todoList.getTodos()[index];


return ListTile(


title: Text(todo.title),


trailing: Checkbox(


value: todo.isCompleted,


onChanged: (bool? value) {


todo.toggleCompleted();


setState(() {});


},


),


onLongPress: () {


todoList.removeTodo(todo.id);


setState(() {});


},


);


},


),


floatingActionButton: FloatingActionButton(


onPressed: () {


final newTodo = Todo(


DateTime.now().toString(),


_controller.text,


false,


);


todoList.addTodo(newTodo);


_controller.clear();


setState(() {});


},


child: Icon(Icons.add),


),


bottomNavigationBar: TextField(


controller: _controller,


decoration: InputDecoration(


hintText: 'Add a new todo',


border: OutlineInputBorder(),


),


),


);


}


}


运行应用

在终端或命令提示符中,执行以下命令运行应用:

bash

flutter run


您应该能够在 Flutter 模拟器或连接的设备上看到待办事项管理应用。

总结

本文通过一个简单的 Dart 待办事项管理示例,展示了如何使用 Dart 和 Flutter 框架创建一个基本的应用程序。通过这个示例,您可以了解到 Dart 语言的基本语法、类的设计、数据模型以及用户界面的构建。希望这篇文章能够帮助您更好地理解 Dart 语言的应用开发。