ActionScript
TypeScript
JavaScript

组件赋值

发布时间:2016-12-30

 

        使用 LayaAir IDE 的UI编辑模式,可以可视化的编辑所有 UI 组件的一些常用属性的值。而在程序运行时,往往需要根据页面的上下文环境、用户的操作、网络数据交互等因素,改变 UI 的显示内容或显示效果,此时就需要动态的修改组件的属性值。在此,特讲一下如何在脚本中对组件进行快速赋值。
        首先我们先来熟悉一个属性:dataSource 。dataSource 是 Component 类定义的组件基本属性之一,也就是说所有由 Component 类派生的组件类都实现了这个属性。
        dataSource 有两种赋值模式:

  • 简单赋值:用来设置组件的默认属性的值,每个组件都有自己指定的默认属性。

  • 复杂赋值:用来设置组件的任意属性的值。 

 

组件赋值格式

        简单赋值格式:
        组件引用名.dataSource=组件默认属性的值;

        基础组件的复杂赋值格式:
        组件引用名.dataSource={组件属性名:组件属性值,组件属性名:组件属性值}; 

        容器组件的复杂赋值格式:
        组件引用名.dataSource={组件属性名:组件属性值,组件子对象的name属性值:组件子对象的默认属性的值,组件子对象的name属性值:{子对象属性名:子对象属性值}};

 


组件默认属性

  • Button、LinkButton、RadioButton:默认属性均为label。

  • Label、TextInput、TextArea:默认属性均为text。

  • ComboBox、Tab、RadioGroup、ViewStack:默认属性均为selectedIndex。

  • Clip:默认属性均为 index。

  • ProgressBar、Scroll、Slider:默认属性均为 value。

  • CheckBox:默认属性是selected。

  • Image:默认属性是skin。

  • List:默认属性是 selectedIndex 或 属性array。根据值得类型进行判定是哪个属性。如果值为数字型或字符串型,则设置的值为 属性 selectedIndex 的值。如果值为数组类型,则设置的值为属性 array 的值。

 

示例演示说明

         这里分别以 Image 组件和 Box 组件为例进行演示。 

Image组件示例

        img是 Image 组件实例的全局引用值,通过属性 var 设置。

图片7.png

 

        Image 的默认属性是 skin ,则简单赋值如下: 

img.dataSource = "resource/ui/image.png";  //默认属性赋值方式


       复杂赋值如下,设置了 image 对象的属性 skin 、x、y 的值:

img.dataSource = { skin:"resource/ui/image.png" , x:200, y:200 };//任意属性赋值方式

Box组件示例

        box 是此 Box 组件实例对象的全局引用值,通过属性 var 设置。在这个 box 对象里面有一个 Clip组件实例,name值为 mClip,还有一个 Label 组件实例,name值为 mLabel。

图片8.png

图片9.png

图片10.png

 

复杂赋值如下

box.dataSource = { x:100, y:120, mClip: { clipX:10, index:2 }, mLabel:"Hello"};


图片11.png

在此示例中:
x:100, y:120 :设置的是Box实例box 的属性。
mClip: { clipX:10, index:2 }  :设置的是 box 里面的Clip 组件对象的属性值。此处需要注意:“mClip” 是Clip 对象的属性 name 的值。
mLabel:"Hello"  :设置的是 box 里面的 Label 组件对象的默认属性值。此处需要注意:“mLabel”是 Label 对象的属性 name 的值。Label 组件的默认属性是 text 属性。