Appearance
容器(Container)
把组件放在同一个容器里,方便统一管理坐标、不透明度、是否显示等。
例:提示弹窗,包含一张底图、一个提示内容、一个确认按钮。
1、容器组件
typescript
//添加容器
this.container = new LM.Container();
this.addChild(this.container);
//设置坐标
this.container.x = 300;
this.container.y = 200;
//设置宽高
this.container.width = 900;
this.container.height = 600;
//在容器里添加背景图
this.bg = new LM.ImgView;
this.container.addChild(this.bg);
this.bg.x = 0;
this.bg.y = 0;
this.bg.src = "Graphics/img/bg.jpg";
//在容器里添加提示文字
this.text = new LM.TextView;
this.container.addChild(this.text);
this.text.x = 20;
this.text.y = 20;
this.text.width = 300-40;
this.text.height = 600-200;
this.text.alignHorizontal = 1;
this.text.alignVertical = 1;
this.text.text = "提示文本";
//在容器里添加确认按钮
this.button = new LM.Button;
this.container.addChild(this.button);
this.button.x = 200;
this.button.y = 400;
this.button.src = "Graphics/img/按钮底图.png";
this.button.text = "确认";
this.button.alignHorizontal = 1;
this.button.alignVertical = 1;
this.button.onClick(() =>{
this.container.visible = false;
})2、常用属性
| 属性 | 解释 | 值 | 默认值 |
|---|---|---|---|
| x | x | 数值 | 0 |
| y | y | 数值 | 0 |
| z | 图层高度,越高越靠上层 | 数值 | 0 |
| width | 宽,图片超出范围会显示不完整 | 数值,不填为自适应 | |
| height | 高,图片超出范围会显示不完整 | 数值,不填为自适应 | |
| backgroundColor | 背景色 | 字符串,填色号如红色“#FF0000” | |
| visible | 是否可见 | 布尔值,true可见,false不可见 | true |
| alpha | 不透明度 | 数值,0~255,255表示完全不透明 | 255 |
| touchEnabled | 是否可点击 | 布尔值,true可点击,false不可点击 | true |
| alphaHitUnable | 透明区域是否可点击 | 布尔值,true可点击,false不可点击 | true |
| isPenetrable | 是否可以穿透(点击到下层组件) | 布尔值,true可穿透,false不可穿透 | true |
| scaleX | 宽缩放率 | 数值,1为原始的宽 | 1 |
| scaleY | 高缩放率 | 数值,1为原始的高 | 1 |
| zoomCenterX | 缩放中心x(相对于自身) | 数值,0.5为自身X轴中点 | 0 |
| zoomCenterY | 缩放中心y(相对于自身) | 数值,0.5为自身Y轴中点 | 0 |
| children | 子对象列表 |
3、常用方法
(1)onClick
点击行为
(2)onTouchDown
按下行为
(3)onTouchUp
抬起行为
(4)onTouchMove
鼠标在组件区域内移动(可用作悬浮)
(5)onTouchCancel
鼠标移出组件区域(可用作离开悬浮)
typescript
let container = new LM.Container()
// 注册了点击事件
container.onClick(()=>{console.log("点击了控件")})
// 注册了按下事件
container.onTouchDown(()=>{console.log("按下")})
// 注册了抬起事件
container.onTouchUp(()=>{console.log("抬起")})
// 注册了移动事件
container.onTouchMove(()=>{console.log("移动了")})
// 注册了移出事件
container.onTouchCancel(()=>{console.log("移出")})(6)addChild
添加子对象
(7)removeAllChildren
移除所有子对象
(8)removeChild
移除子对象
typescript
let container = new LM.Container();
let text = new LM.TextView();
container.addChild(text);
container.removeChild(text);