5分钟 待办事项应用 实战

第一步：创建数据表

每个应用都需要一个存储数据的地方。我们将从为任务创建一个数据表开始。

1. 点击顶部导航栏的 数据 标签。
2. 点击 创建表 并将其命名为 task（使用小写字母）。
3. 为 task 表添加以下字段：
   • 添加一个 文本 类型的字段并命名为 title。这将存储任务的内容。
   • 添加另一个 布尔值 类型的字段并命名为 is_completed。这用于跟踪完成状态。

第二步：搭建界面

接下来，我们将设计界面来展示任务，并允许用户与任务进行交互。

1. 切换回 页面 模块。
2. 点击添加页面，并将其命名为 主页。
3. 添加列表组件:
   • 点击左侧组件面板的 添加组件 按钮，打开组件列表。
   • 从左侧组件面板拖拽一个 列表 组件到画布上，并将其命名为 任务列表。
   • 选中该列表，前往右侧属性面板，在 数据 标签下，将其数据源设置为我们刚刚创建的 task 表。
4. 配置列表项:
   • 选中列表组件下的列表项组件。
   • 添加一个 文本 组件。在 设计 标签下，将其内容绑定为 任务列表.当前项.title。
   • 添加一个 开关 组件。在 设计 标签下，将其默认值绑定为 任务列表.当前项.is_completed。
5. 添加输入区:
   • 在列表组件上方，添加一个 视图 组件来包裹输入框和按钮。将其命名为 输入区域。将其布局方向设置为 水平。
   • 在输入区域组件内，添加一个 输入框 组件用于输入新任务。将其命名为 任务输入。
   • 在输入区域组件内，添加一个 按钮 组件，并将其内容修改为 “添加”。将其命名为 添加按钮。

第三步：配置逻辑

我们的界面已经准备好了，但是按钮还没有任何功能。我们需要添加行为来操作数据。

1. 创建任务

1. 选中你刚刚创建的 “添加” 按钮。
2. 在右侧属性面板，切换到 行为 标签。
3. 在 点击时 触发器下，添加一个行为：选择 数据库操作 -> 新增数据。
   • 目标表：task。
   • 字段赋值：将 title 字段映射为 输入型组件-任务输入的值。
4. 聚焦到新增数据成功分支，添加两个行为：

• 添加 重置组件输入值 行为并选择 任务输入组件。这将在任务添加后清空文本框。
• 添加 刷新 行为并选择 任务列表。这将刷新列表以显示新添加的任务。

2. 更新任务状态

1. 选中列表项内的 开关 组件。
2. 在右侧属性面板，切换到 行为 标签。
3. 在 值改变时 触发器下，添加一个行为：选择 数据库 -> 修改数据。
   • 目标表：task。
   • 过滤条件：设置过滤条件为 id 等于 任务列表.当前项.id（这确保只更新当前行）。
   • 字段赋值：将 is_completed 字段映射为 开关组件的值。这将根据开关的状态更新数据。

第四步：预览你的应用

现在你可以点击顶部导航栏的 实时预览 图标。在实时预览窗口中，尝试在输入框中输入任务，点击添加，并切换开关，看看你功能完备的应用是如何运行的！

第五步：发布你的应用

一旦测试成功，就可以部署你的应用了。

1. 点击顶部导航栏的 发布 图标。
2. 等待构建过程完成。完成后，你将获得一个 URL 地址，可以与其他人分享。

第六步：管理实时数据

1. 点击顶部导航栏的 数据 标签，然后切换到 数据库 子标签。
2. 点击 task 表以查看和管理由你的应用生成的真实数据。