axureRP10待办事项

### Axure RP10 中待办事项功能使用教程

在Axure RP10中创建待办事项列表可以通过动态面板和交互设置来实现。以下是详细的说明：

#### 创建基础结构
为了构建待办事项组件，首先需要定义基本布局。通常这会涉及到一个表格形式的设计，在其中每一行代表一项任务。

- **添加矩形作为容器**：绘制多个矩形用于表示单个待办项的各个字段（如标题、描述）。这些矩形可以被组合成组以便于管理和移动[^1]。

<div style="display:flex;align-items:center;">
    <div style="width:80%;border-bottom:solid 1px #ccc;padding:5px;">任务名称</div>
    <button>完成</button>
</div>

#### 利用动态面板增强灵活性
通过引入动态面板，可以使待办事项更加灵活多变。例如，当点击某个按钮时显示更多详情；或者允许用户拖拽调整任务顺序等操作。

- **插入动态面板并配置属性**：选择工具栏上的“Dynamic Panel”，放置到画布上适当位置，并为其命名（比如叫作`TodoListPanel`），之后可以在右侧属性窗口里设定其宽度高度等内容[^2]。

#### 设定交互逻辑
为了让待办清单具备实用价值，还需要精心规划各种可能发生的事件及其响应方式——即所谓的“交互”。

- **建立条件动作链接各元素**：对于每一个触发器（Trigger），都应关联相应的Action链表。以新增一条记录为例，这里就需要编写一段脚本来向现有数据集中追加新成员。

// 假设有一个名为 'todos' 的数组存储所有的 todo 对象
var todos = widget.getVariable('todos') || [];
todos.push({ title: "New Task", completed: false });
widget.setVariable('todos', todos);

#### 数据驱动视图更新
最后一步就是确保界面能够及时反映出任何底层模型的变化情况。借助Repeater控件或自定义函数都可以轻松达成此目的。

- **刷新 Repeater 组件展示最新状态**：每当有新的条目加入或是旧有的被移除之时，记得调用相应方法让UI同步变动后的集合信息。

onLoad: function(widget, event){
    var repeater = this;
    // 获取最新的todo list 并重新加载repeater的数据源
    var updatedTodos = ... ; // 更新后的to-do列表获取方式取决于具体应用场景
    repeater.load(updatedTodos);
}