共计 1853 个字符，预计需要花费 5 分钟才能阅读完成。
界面驱动数据
checkbox 状态扭转后, 去批改与他绑定的数据
"ui";
ui.layout(
<vertical gravity="center_horizontal">
<horizontal gravity="center" margin="30">
<checkbox id="checkbox"></checkbox>
</horizontal>
</vertical>
);
ui.checkbox.on("check", (checked) => {log(checked);
});
数据驱动界面
"ui";
engines.all().map((ScriptEngine) => {if (engines.myEngine().toString() !== ScriptEngine.toString()) {ScriptEngine.forceStop();
}
});
ui.layout(
<vertical gravity="center_horizontal">
<list id="list">
<horizontal gravity="center" w="*" margin="10">
<text textColor="#222222" textSize="16sp" text="{{this.num}}"></text>
<checkbox id="checkbox" checked="{{this.state}}"></checkbox>
</horizontal>
</list>
</vertical>
);
let dataList = [];
for (var i = 0; i < 10; i++) {dataList.push({ num: i, state: !random(0, 1) });
}
ui.list.setDataSource(dataList);
ui.list.on("item_click", function (item, i, itemView, listView) {toastLog(i);
});
ui.list.on("item_bind", function (itemView, itemHolder) {
// 绑定勾选框事件
itemView.checkbox.on("check", function (checked) {
let item = itemHolder.item;
item.state = checked;
});
});
setTimeout(() => {dataList.map((item, i) => {item.state = !item.state;});
ui.list.adapter.notifyDataSetChanged();
toastLog("更新数据");
}, 2000);
UI 界面
在这个代码示例中,
数据驱动界面与界面驱动数据共存
界面驱动数据
勾选框能够扭转 dataList 中的数据
ui.list.on("item_bind", function (itemView, itemHolder) {
// 绑定勾选框事件
itemView.checkbox.on("check", function (checked) {
let item = itemHolder.item;
item.state = checked;
});
});
数据驱动界面
dataList 批改后, 告诉界面更新
setTimeout(() => {dataList.map((item, i) => {item.state = !item.state;});
ui.list.adapter.notifyDataSetChanged();
toastLog("更新数据");
}, 2000);
如何获取某个勾选框的状态?
每个勾选框都隐形或者显性的绑定一个序号,
通过序号来获取勾选框的状态
在 dataList 中, 有一个 num 键, 就是显性的给 checkbox 编一个序号,
当要获取某个 checkbox 的勾选状态时, 就这样做
dataList[num].state
这就要求咱们, 要放弃控件的状态和数据的强一致性
当 checkbox 被点击后, 要及时更新 dataList 中的数据;
当 dataList 的数据更改后, 要及时更新 checkbox 的状态
如何设置某个勾选框的状态?
setTimeout(() => {dataList[3].state = !dataList[3].state;
ui.list.adapter.notifyDataSetChanged();
toastLog("更新数据");
}, 4000);
先批改 dataList 指定序号的数据,
而后告诉 listView 更新勾选框的状态
正文完