Flutter学习案例分享-代办事项笔记案例01

代办事项笔记01

• 学习分享一个代办事项笔记应用程序，在程序中用户可以创建包含许多任务的事项列表。

项目基本状态管理

• 随着应用程序的增长，如果没有一个好的方案来管理，程序会变得越来越复杂，所有的解决方案都有一个共同目的，就是UI层和业务逻辑层分离。

模型-视图分离

• 模型和视图在程序中有非常重要的概念。

• Flutter中模型是负责处理应用程序数据的类，是一个最基本的dart类。

• Flutter中视图是由多个widgets组成，在屏幕上绘制界面显示该数据的类。

创建程序

• 创建一个FLutter程序，在lib文件夹下添加两个新文件夹，models, views。

Models数据类

• 先从数据层开始。首先创建2个保存应用程序任务数据和计划的类。

• class Task {
    final String description;
    final bool complete;
    const Task({this.description = '', this.complete = false});

  class Plan {
    final String name;
    final List tasks;
    const Plan({this.name = '', this.tasks = const []});
  }

• 如果后续引用的dart文件太多，可以添加一个文件专门来添加引用

Views UI层

• 在views文件夹下添加视图页面,main文件内引用它

• 在一个有状态的Widget下返回一个Scaffold，它包括一个应用栏，一个浮动按钮（添加新任务），一个任务列表。

• 用户可以通过点击浮动按钮添加新任务，每个任务包含一个复选框（标记任务完成状态）和一个文本输入框（编辑任务描述）。

• 当用户修改任务描述或完成状态时，页面会自动更新并刷新视图。

• 页面结构

• class PlanPage extends StatefulWidget {
    const PlanPage({super.key});
    @override
    State createState() => _PlanPageState();
  }
  ///页面结构
  class _PlanPageState extends State {
    var plan = const Plan();
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        //顶部应用栏
        appBar: AppBar(
          title: const Text('总体规划'),
        ),
        //页面主体（展示任务列表）
        body: buildListView(),
        //浮动按钮（添加任务）
        floatingActionButton: buildAddTaskButton(),
      );
    }

  浮动按钮

• //浮动按钮
  Widget buildAddTaskButton() {
    return FloatingActionButton(
      onPressed: () {
        setState(() {
          plan = Plan(
            name: plan.name,
            tasks: List.from(plan.tasks)..add(const Task()),
          );
        });
      },
      child: const Icon(Icons.add),
    );
  }

  任务列表

• //任务列表
  Widget buildListView() {
    return ListView.builder(
      itemCount: plan.tasks.length,
      itemBuilder: (context, index) => buildTaskTitle(plan.tasks[index], index),
    );
  }

  任务复选框和编辑框

• Widget buildTaskTitle(Task task, int index) {
    return ListTile(
      leading: Checkbox(
          value: task.complete,
          onChanged: (value) {
            setState(() {
              plan = Plan(
                  name: plan.name,
                  tasks: List.from(plan.tasks)
                    ..[index] = Task(
                      description: task.description,
                      complete: value ?? false,
                    ));
            });
          }),
      title: TextFormField(
        initialValue: task.description,
        onChanged: (value) {
          setState(() {
            plan = Plan(
                name: plan.name,
                tasks: List.from(plan.tasks)
                  ..[index] = Task(
                    description: value,
                    complete: task.complete,
                  ));
          });
        },
      ),
    );
  }

main文件下引用该页面

void main() {
  runApp(const MasterPlanApp());
}

class MasterPlanApp extends StatelessWidget {
  const MasterPlanApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      home: PlanPage(),
    );
  }
}

启动IOS模拟器运行程序

​​​​​​​