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

简介: 排列9个单选按钮, 三行三列

排列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);
相关文章
vscode编辑器使用拓展插件background添加背景图片改变外观
vscode编辑器使用拓展插件background添加背景图片改变外观
202 0
|
图形学
unity3d UGUI常用游戏进度条实现方式
测试.png 直接将脚本挂载到进度条image对象上即可,这种方式可以解决当进度条使用图片的时候,防止图片拉伸变形 using UnityEngine; using UnityEngine.
3063 0
|
API iOS开发 开发者
iOS文本布局探讨之三——使用TextKit框架进行富文本布局
iOS文本布局探讨之三——使用TextKit框架进行富文本布局
433 0
iOS文本布局探讨之三——使用TextKit框架进行富文本布局
|
XML Android开发 数据格式
Android开发中那些你费力写的控件,其实原生都有
实现一个开关的切换,你会怎么做,写一个layout,一半点击为开,一半点击为关,还是两张图片,点一下开,再点一下关?让你实现一个根据用户的输入弹出一个下拉菜单等等,其实都大可没有必要去自己写,本身Android里都有,下面对各个控件,我会一一举例。
223 0
|
前端开发 Android开发
autojs自定义控件-移动背景
我们把背景看成一个小球, 小球可以在某个空间内自由移动, 他需要一个目标的坐标信息, 然后需要一个从当前的起点, 到目标点的移动规则, 小球也可以在移动的时候变换形态, 比如圆形, 椭圆, 圆角矩形等
14555 0
|
数据可视化
autojs可视化控件位置
牙叔教程 简单易学 使用场景
359 0
autojs可视化控件位置
|
前端开发 开发者 容器
手写一个在Flutter里展示”精灵图“的Widget
使用Flare引擎之后,完全没有了Flutter应用特有的代码风格。虽然更适应我这类有过游戏开发经验的开发者,但并不利于我们学习Flutter框架。所以我在那篇文章最后也说了,要抽空用Widget重写一次这个游戏。 首要任务,就是得有一个支持”精灵图“的Widget,既然是学习,那就不能用别人开发好的,必须得自己亲手造轮子。
262 0
手写一个在Flutter里展示”精灵图“的Widget
|
Windows UED API
[UWP]如何实现UWP平台最佳图片裁剪控件
原文:[UWP]如何实现UWP平台最佳图片裁剪控件 前几天我写了一个UWP图片裁剪控件ImageCropper(开源地址),自认为算是现阶段UWP社区里最好用的图片裁剪控件了,今天就来分享下我编码的过程。
1180 0
|
图形学
Unity UGUI Layout自动排版组件用法介绍
Unity UGUI Layout自动排版组件用法介绍 助力快速理解 Unity UGUI Layout 布局组件的使用场景 本文提供全图文流程,中文翻译。 要将某个板块中的信息,图标给整理,整齐的进行排版 如果我们一个的把方块、或者这种长条形的Ui给逐个创建,工作量十分大,而且容易出错导致...
5156 0