关闭

eui基本知识点

798人阅读 评论(0) 收藏 举报
分类:
1.皮肤分离机制:皮肤分离机制就是将原本一个组件拆分成两个。一个逻辑组件只管代码控制,一个皮肤组件只负责外观。运行时将


皮肤组件附加到逻辑组件上,变成一个完整组件。皮肤组件并不是显示对象,实际上更类似一个持有外观信息的数据对象。这样做的


好处比较多,例如:方便代码解耦,方便复用外观,方便可视化编辑,等等。


2.eui做的exml文件需要把路径写在default.thm.json文件里面的“exmls”数组下,resource下的图片资源需要添加到


default.res.json文件里面,并且需要在资源组加组,然后把资源加进去。


3.假设一个按钮EXML文件的路径为:[项目根路径]/resource/skins/ButtonSkin.exml,引用那个ButtonSkin.exml的代码
如下:var button = new eui.Button();
      button.skinName = "resource/skins/ButtonSkin.exml";
      this.addChild(button);


4.动态加载上述例子(通用):
private init():void{
             EXML.load("skins/ButtonSkin.exml",this.onLoaded,this);
        }
        private onLoaded(clazz:any,url:string):void{
             var button = new eui.Button();
             button.skinName = clazz;
             this.addChild(button);
        }


5.exml文件代码:<e:Group class="app.MyGroup" xmlns:e="http://ns.egret.com/eui"> <e:Image source="image/button_up.png" 


x="10"> <e:scale9Grid> <e:Rectangle x="10" y="10" width="45" height="35"/> </e:scale9Grid> </e:Image> </e:Group>
  等价于:var image = eui.Image();
          image.source = "image/button_up.png";
          image.x = 10;
          var rect = new Rectangle();
          rect.x = 10;
          rect.y = 10;
          rect.width = 45;
          rect.height = 35;
          image.scale9Grid = rect;
          this.addChild(image);


6.文本:eui.Label, 继承自 egret.TextField


7.图片:eui.Image, 继承自 egret.Bitmap


8.按钮:eui.Button 继承自 eui.Component类,因此它是可定制皮肤的。


9.复选框:eui.CheckBox, 继承自切换按钮 eui.ToggleButton,当它被选中,selected属性将变为true,反之则为false。


10.单选按钮:eui.RadioButton,如果你选择了A,那BCD则会自动切换到非选中状态


11.状态切换按钮:eui.ToggleSwitch 用来定义开关组件,包括一个开启和关闭状态的皮肤。它继承自 eui.ToggleButton ,可以使


用 selected 来设置或获取其开关状态。


12.滑动选择器:eui.Slider,继承自eui.Range控件水平滑块控件:eui.HSlider(手机上的亮度调节工具),垂直滑块控件:


eui.VSlider


13.进度条:eui.ProgressBar,进度条控件继承自eui.Range控件。
垂直向下:  this.vBar = new eui.ProgressBar();
            this.vBar.direction = eui.Direction.BTT;//从下到上
            this.vBar.width = 30;
            this.vBar.height = 200;


14.输入文本:eui.EditableText, 继承自 egret.TextInput


15.简单容器:Group,Group 是最轻量级的,它本身不可以设置皮肤,也不具备外观,它的呈现只取决于内部的显示对象。如果您自定


义一个类,继承自Group,那么请注意,内部的其它对象应该在 createChildren() 方法中创建和添加,也就是说,您要覆盖 Group 


的 createChildren() 方法。


16.层叠容器:ViewStack,在 ViewStack 这个容器中添加多个子项,但只能显示其中的一个。以通过设置 selectedIndex 或者 


selectedChild 属性,来控制当前应该显示的子项。


17.面板容器:Panel,它和 Group 的区别在于,可以给它附加一个皮肤,并设置一个标题栏和关闭按钮


18:滚动控制容器:ViewPort,组件: Scroller,只需要创建一个 Scroller 的实例,设置位置和尺寸,然后把需要”滚动”的那个容器,设置到 Scroller 的 viewport 属性上就可以了。


19:数据容器:DataGroup,数据源属性:dataProvider
              var myCollection:eui.ArrayCollection = new eui.ArrayCollection(sourceArr);
              var dataGroup:eui.DataGroup = new eui.DataGroup();
              dataGroup.dataProvider = myCollection;


20.数组集合:ArrayCollection 是 eui 中专用的一个数据封装类。
             //先创建一个数组
             var sourceArr:any[] = [{name:"one",value:1},{name:"two",value:2}];
             //用 ArrayCollection 包装
             var myCollection:eui.ArrayCollection = new eui.ArrayCollection(sourceArr);


21.列表:list,继承自DataGroup
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:20381次
    • 积分:896
    • 等级:
    • 排名:千里之外
    • 原创:70篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论