autojs data-driven interface and interface-driven data

Uncle Tooth Tutorial is simple and easy to understand

interface-driven data

After the checkbox state changes, modify the data bound to him

"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);
});
复制代码

data-driven interface

"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 interface

In this code sample,

Data-driven interface and interface-driven data coexist

interface-driven data

Check the box to change the data in the dataList

ui.list.on("item_bind", function (itemView, itemHolder) {
  //绑定勾选框事件
  itemView.checkbox.on("check", function (checked) {
    let item = itemHolder.item;
    item.state = checked;
  });
});
复制代码

data-driven interface

After the dataList is modified, the notification interface is updated

setTimeout(() => {
  dataList.map((item, i) => {
    item.state = !item.state;
  });
  ui.list.adapter.notifyDataSetChanged();
  toastLog("更新数据");
}, 2000);
复制代码

How to get the status of a checkbox?

Each checkbox is implicitly or explicitly bound with a serial number,

Get the state of the checkbox by serial number

In the dataList, there is a num key, which is to explicitly program a serial number to the checkbox,

When you want to get the checked state of a checkbox, just do this

dataList[num].state
复制代码

This requires us to maintain strong consistency between the state and data of the control

When the checkbox is clicked, the data in the dataList should be updated in time;

When the data of the dataList changes, the state of the checkbox should be updated in time

How to set the state of a checkbox?

setTimeout(() => {
  dataList[3].state = !dataList[3].state;
  ui.list.adapter.notifyDataSetChanged();
  toastLog("更新数据");
}, 4000);
复制代码

First modify the data of the specified serial number in dataList,

Then notify the listView to update the state of the checkbox

Celebrity Quotes

Ideas are the most important, other Baidu, bing, stackoverflow, github, Android documentation, autojs documentation, and finally the group to ask --- Uncle Tooth Tutorial

Disclaimer

Part of the content comes from the Internet This tutorial is only for learning, and it is prohibited to use it for other purposes\

WeChat public account tooth uncle tutorial