在 EUI 提供的容器中,Group 是最轻量级的,它本身不可以设置皮肤,也不具备外观,它的呈现只取决于内部的显示对象。如果需要使用容器,并且没有设置皮肤的需求,那么请尽量使用 Group。
Group 操作内部对象的方法和 Sprite 基本一致,只是增加了2个方法getElementAt()
和 numElements()
,在后面的 数据容器 章节将会详细说明。
如果自定义一个类,继承自Group,那么其内部的其它对象应该在 createChildren()
方法中创建和添加,也就是说,要覆盖 Group 的 createChildren()
方法。参见下面的例子:
class GroupDemo extends eui.Group {
constructor() {
super();
}
protected createChildren(): void {
super.createChildren();
var btn: eui.Button = new eui.Button();
btn.label = "Button";
this.addChild(btn);
}
}
eui 中容器的一个显著特点是,可以配置 layout 对象,来实现不同的布局方式。这对开发工作是非常有好处的,可以使用默认的几个布局类,来节省大量的编码工作。布局的详细内容,请看 使用布局类 。下面的示例演示了使用垂直布局来排列4个按钮:
/**
* Created by FCX on 1/14/2016.
*/
class GroupDemo extends eui.Group {
constructor() {
super();
}
protected createChildren():void {
super.createChildren();
this.layContents();
}
private myGroup:eui.Group;
private layContents():void {
//设置默认主题
var theme = new eui.Theme(`resource/default.thm.json`, this.stage);
//创建一个 Group
var myGroup = new eui.Group();
myGroup.x = 100;
myGroup.y = 100;
myGroup.width = 500;
myGroup.height = 300;
this.myGroup = myGroup;
this.addChild(myGroup);
// 绘制矩形用于显示 myGroup 的轮廓
var outline:egret.Shape = new egret.Shape;
outline.graphics.lineStyle(3,0x00ff00);
outline.graphics.beginFill(0x1122cc,0);
outline.graphics.drawRect(0, 0, 500, 300);
outline.graphics.endFill();
myGroup.addChild(outline);
//在 myGroup 中创建4个按钮
for (var i:number = 0; i < 4; i++) {
var btn:eui.Button = new eui.Button();
btn.label = "button" + i;
btn.x = 10 + i * 30;
btn.y = 10 + i * 30;
myGroup.addChild(btn);
}
//使用绝对布局,会忽略 myGroup 中按钮的自定义坐标
myGroup.layout = new eui.VerticalLayout();
}
}
编译运行,效果如图:
一些使用技巧:
- 调用
removeChildren()
方法可以删除所有的内部显示对象 - Group 和所有其他 UI 组件都遵循一个原则:组件在没被外部显式设置尺寸(直接设置 width/height)的前提下。会自己测量出一个“合适”的大小。这时候 Group 宽高就是 contentWidth 和 contentHeight 的宽高。如果显式设置了 Group 的尺寸,则它的尺寸不一定等于内部对象尺寸。比如Group高度是 100 像素,但内部几个按钮的高度加起来是 400 像素,此时通过 group.height 获取的高度还是100。您可以使用 contentWidth 和 contentHeight 属性来获取内部高度。
- 如果内容尺寸超出容器尺寸,默认是全部显示的,您可以设置 ~~~ typescriptscrollEnabled = true~~~ typescript ,这样超出的部分就不再显示了。 效果如下图: