控件结构

控件结构

• 讲完了UI，紧接着就是控件，单个控件的配置结构是这样的

background:
    type: texture
    val: "background" # 可选
    attribute:
      point: ~middle_center
      width: 1000
      height: 500
      normal: ~AXLoginView/background.png
    action:
        click: |-
          // 点击事件触发器
    children:
      title:
        type: text
        attribute:
          x: 500
          y: 28
          center: true
          fontSize: 120
          texts:
            - ~&7&l芜湖

• 从配置中不难看出，控件主要是四个部分：类型、属性、子组件、触发器

• 其中：

• type是一个非脚本的常量，用来设置组件的类型

• attribute 用来设置组件的属性，在此之下的所有值都是脚本语句，而键则是变量名，可通过脚本访问（也就是说你可以随便自己定义属性名，用来做一些你想做的东西）

• children 用来设置组件的子组件，是一个嵌套的结构，可以一直套娃，但是不要太深，太深是很影响性能的。

• val是一个非脚本常量，可以不填，这个是用于简化结构用的，比如我们有些时候结构比较深，可能需要用到以下代码：

val.root['控件A']['控件B']['控件C'].x = 100

• 这个时候它这个代码显得很长且不易读，一切显得如此痛苦，此时如果我们在控件C加一个val: “component” 即可直接通过val.component调用到这个控件。

• action 用来创建动作，里面的键是动作名称，值是触发后的脚本内容，当动作的名称和触发器一致时，则在对应事件触发后执行同名动作下的代码。

父子组件逻辑

• ArcartX的UI是相对布局，也就是子组件的位置起点是父组件的左上角（当然如果设置了锚点就是其它相对位置，这个后面讲解）。
• 除此之外还有其它的父子级关系，我们在控件属性章节的备注中会讲解。