在讲解List之前,我们先介绍一下Morn组件赋值功能
默认属性赋值
界面逻辑开发过程中,经常会涉及到动态更改UI属性,比如:
界面有一个按钮,一个多选框和一个文本,分别命名为myButton,myCheckBox,myLabel
假如你需要更改按钮的label属性为”按钮”,同时让CheckBox变成选中状态,并且还要修改Label组件的内容,传统的做法是先取出来,然后再更改其属性,代码如下:
var myButton:Button = getChildByName("myButton") as Button;
myButton.label = "按钮";
var myCheckBox:CheckBox = getChildByName("myCheckBox") as CheckBox;
myCheckBox.selected = true;
var myLabel:Label = getChildByName("myLabel") as Label;
myLabel.text = "我是label";
在Morn中,只需一行代码即可实现上述功能
this.dataSource = {myButton:"按钮",myCheckBox:true,myLabel:"我是label"};
格式:容器.dataSource = {组件名:默认属性值,组件名:默认属性名。。。}
是不是非常简单呢。
赋值,简化了逻辑操作,把原来对UI组件获取,设置等操作进行封装,将开发者的焦点集中到对数据操作上,大大简化了UI开发的复杂性和工作量,使用起来非常方便,能大大提高工作效率。
所以,Morn中大部分UI逻辑都变成了赋值操作,就是这么简单。
上述赋值方式为默认属性赋值,只更改组件的默认属性,一个组件只有一个默认属性,比如Button的默认属性是label,CheckBox的默认属性是selected
默认属性对应如下:
Button,LinkButton,RadioButton默认属性均为label
Label,TextInput,TextArea默认属性均为text
ComboBox,Tab,RadioGroup,ViewStack默认属性均为selectedIndex
Clip,FrameClip默认属性均为frame
ProgressBar,Scroll,Slider默认属性均为value
CheckBox为selected,Image为url
自定义赋值
上述默认属性赋值简单好用,但是很多情况下,不仅仅更改组件的默认属性,还会更改其他属性,那么可以通过自定义赋值实现,还是上面例子,更改赋值如下:
this.dataSource = {myButton:{label:"按钮",labelBold:14},myCheckBox:{selected:true,alpha:0.5}};
上述操作,同时更改了myButton的label和labelBold属性,也同时更改了myCheckBox的selected和alpha属性
格式:容器.dataSource = {组件名:{属性:属性值,属性:属性值},组件名:{属性:属性值,属性:属性值}。。。}
对容器赋值
容器的赋值和非容器赋值不太一样:
非容器赋值,key对应的组件的属性名。容器赋值,key对应的是子对象的名称
比如页面中有个Box,var定义为box1,Box内部有个Button,name为button1,赋值表达式如下:
box1.dataSource = {button1:{label:”按钮”,alpha:0.5}}
格式:容器.dataSource = {子对象名:{属性:属性值,属性:属性值}。。。}
List赋值
因为list是一个列表,list赋值和上面不太一样,list赋值对象为一个Array,而不是object
例如下面list
list.dataSource = [{label1:"我是label1",checkBox1:true},{label1:"我是label2",checkBox1:true}...];
格式:list.dataSource = [item0赋值,item1赋值,item2赋值。。。]
同时也可以设置list的array属性进行赋值,效果同dataSource
是不是非常简单但强大呢,下节继续为大家讲解《List的详细使用用法》