autojs之同一种布局的多种实现方式

排列9个单选按钮, 三行三列

第一种

ui.layout(
  <horizontal padding="10">
    <radiogroup id="radioParent">
      <horizontal>
        <radio text="选项1"></radio>
        <radio text="选项2"></radio>
        <radio text="选项3"></radio>
      </horizontal>
      <horizontal>
        <radio text="选项4"></radio>
        <radio text="选项5"></radio>
        <radio text="选项6"></radio>
      </horizontal>
      <horizontal>
        <radio text="选项7"></radio>
        <radio text="选项8"></radio>
        <radio text="选项9"></radio>
      </horizontal>
    </radiogroup>
  </horizontal>
);

第二种

ui.layout(
  <TableLayout>
    <RadioGroup>
      <TableRow>
        <radio text="选项1"></radio>
        <radio text="选项2"></radio>
        <radio text="选项3"></radio>
      </TableRow>
      <TableRow>
        <radio text="选项4"></radio>
        <radio text="选项5"></radio>
        <radio text="选项6"></radio>
      </TableRow>
      <TableRow>
        <radio text="选项7"></radio>
        <radio text="选项8"></radio>
        <radio text="选项9"></radio>
      </TableRow>
    </RadioGroup>
  </TableLayout>
);

第三种

ui.layout(
  <grid id="radioParent" spanCount="3" h="*">
    <radio text="{{this}}"></radio>
  </grid>
);
var dataList = ["选项1", "选项2", "选项3", "选项4", "选项5", "选项6", "选项7", "选项8", "选项9"];
ui.radioParent.setDataSource(dataList);

第四种

ui.layout(
  <list id="list">
    <horizontal>
      <radio text="{{this.first}}"></radio>
      <radio text="{{this.second}}"></radio>
      <radio text="{{this.third}}"></radio>
    </horizontal>
  </list>
);

var items = [
  {
    first: "选项1",
    second: "选项2",
    third: "选项3",
  },
  {
    first: "选项4",
    second: "选项5",
    third: "选项6",
  },
  {
    first: "选项7",
    second: "选项8",
    third: "选项9",
  },
];
ui.list.setDataSource(items);

微信公众号 AutoJsPro教程

QQ群

747748653