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模拟器运行程序

​​​​​​​ 

你可能感兴趣的:(Flutter案例学习,学习,flutter,android-studio)