排列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);