Egret UI（三）：控件

文本

// 文本
var label: eui.Label = new eui.Label();
label.text = "eui Label test test test test test test test test test test test";
this.addChild(label);
label.width = 400; // 设置宽度
label.height = 300; // 设置高度
label.fontFamily = "Tahoma"; // 设置字体
label.textColor = 0xFF0000; // 设置颜色
label.size = 35; // 设置文本字号
label.bold = true; // 设置是否加粗
label.italic = true; // 设置是否斜体
label.textAlign = "left"; // 设置水平对齐方式
label.verticalAlign = "middle"; // 设置垂直对齐方式
label.lineSpacing = 2; // 行间距

图片

// 图片
var image = new eui.Image();
image.source = "resource/assets/demo.png";
image.scale9Grid = new egret.Rectangle(25, 25, 25, 25);
image.width = 500;
image.height = 500;
this.addChild(image);

按钮

// 按钮
var button = new eui.Button();
button.width = 100;
button.height = 40;
button.label = "Confirm";
// button.skinName = "resource/eui_skins/ButtonSkin.exml";
this.addChild(button);
// button.enabled = false;
button.addEventListener(egret.TouchEvent.TOUCH_TAP, btnTouchHandler, this);
function btnTouchHandler(event: egret.TouchEvent): void {
console.log("button touched");
}

复选框

// 复选框
var cbx = new eui.CheckBox();
cbx.label = "Select 1";
this.addChild(cbx);
cbx.x = cbx.y = 30;
// cbx.enabled = false; // 禁用复选框
cbx.addEventListener(eui.UIEvent.CHANGE, (evt: eui.UIEvent) => {
egret.log(evt.target.selected);
}, this);

单选框

// groupName方法
var rdb1: eui.RadioButton = new eui.RadioButton();
rdb1.label = "男";
rdb1.value = 0;
this.addChild(rdb1);
var rdb2: eui.RadioButton = new eui.RadioButton();
rdb2.y = 30;
rdb2.label = "女";
rdb2.value = 1;
this.addChild(rdb2);
rdb1.selected = true; // 默认选项
rdb1.groupName = rdb2.groupName = "sex";
rdb1.addEventListener(eui.UIEvent.CHANGE, radioChangeHandler, this);
rdb2.addEventListener(eui.UIEvent.CHANGE, radioChangeHandler, this);
function radioChangeHandler(evt: eui.UIEvent): void {
egret.log(evt.target.value);
}// RadioButtonGroup
var radioGroup: eui.RadioButtonGroup = new eui.RadioButtonGroup();
radioGroup.addEventListener(eui.UIEvent.CHANGE, radioChangeHandler, this);
var rdb1: eui.RadioButton = new eui.RadioButton();
rdb1.label = "男";
rdb1.value = 0;
this.addChild(rdb1);
var rdb2: eui.RadioButton = new eui.RadioButton();
rdb2.y = 30;
rdb2.label = "女";
rdb2.value = 1;
this.addChild(rdb2);
rdb2.selected = true; // 默认选项
rdb1.group = rdb2.group = radioGroup;
function radioChangeHandler(evt: eui.UIEvent): void {
var radioGroup: eui.RadioButtonGroup = evt.target;
console.log(radioGroup.selectedValue);
}

状态切换按钮

var btn: eui.ToggleSwitch = new eui.ToggleSwitch();
btn.addEventListener(eui.UIEvent.CHANGE, (evt: eui.UIEvent) => {
egret.log(evt.target.selected);
}, this);
this.addChild(btn);

let toggleBtns: Array<eui.ToggleButton> = [];
for (var i: number = 0; i < 4; i++) {
var btn: eui.ToggleButton = new eui.ToggleButton();
btn.label = String(i);
btn.width = 50;
btn.height = 50;
btn.x = i * btn.width;
btn.addEventListener(eui.UIEvent.CHANGE, (evt: eui.UIEvent) => {
console.log(evt.target);
for (var j: number = 0; j < toggleBtns.length; j++) {
toggleBtns[j].selected = (toggleBtns[j] == evt.target);
}
}, this);
toggleBtns.push(btn);
this.addChild(btn);
}
console.log(toggleBtns);

滑动选择器

var hSlider: eui.HSlider = new eui.HSlider();
hSlider.width = 200;
hSlider.minimum = 0; // 定义最小值
hSlider.maximum = 100; // 定义最大值
hSlider.value = 10; // 定义默认值
hSlider.addEventListener(eui.UIEvent.CHANGE, (evt: eui.UIEvent): void => {
console.log(evt.target.value);
}, this);
this.addChild(hSlider);
var vSlider: eui.VSlider = new eui.VSlider();
vSlider.height = 200;
vSlider.minimum = 100; // 定义最小值
vSlider.maximum = 200; // 定义最大值
vSlider.value = 120; // 定义默认值
vSlider.addEventListener(eui.UIEvent.CHANGE, (evt: eui.UIEvent): void => {
console.log(evt.target.value);
}, this);
this.addChild(vSlider);

进度条

let pBar = new eui.ProgressBar();
// pBar.direction = eui.Direction.BTT; // 从下到上
pBar.maximum = 210; // 设置进度条的最大值
pBar.minimum = 0; // 设置进度条的最小值
pBar.width = 200;
pBar.height = 200;
this.addChild(pBar);
pBar.value = 42; // 设置进度条的初始值
// 用timer来模拟加载进度
var timer: egret.Timer = new egret.Timer(10, 0);
timer.addEventListener(egret.TimerEvent.TIMER, timerHandler, this);
timer.start();
function timerHandler(): void {
pBar.value += 1;
if (pBar.value >= 210) {
pBar.value = 0;
}
}

输入框

var textInput = new eui.TextInput();
// textInput.skinName = "resource/eui_skins/TextInputSkin.exml";
textInput.prompt = "请输入文字";
textInput.addEventListener(egret.Event.CHANGE, (e: egret.Event) => {
egret.log(e.target.text);
}, this);
this.addChild(textInput);

• 问题：​​wordWrap 不生效​​



let bgBox: egret.Shape = new egret.Shape();
bgBox.graphics.beginFill(0xffffff);
bgBox.graphics.drawRect(0, 0, 500, 200);
bgBox.graphics.endFill();
this.addChild(bgBox);
let myEditableText: eui.EditableText = new eui.EditableText(); //新建一个输入框
myEditableText.text = "My PasswordText";
myEditableText.prompt = "请输入密码";
myEditableText.textColor = 0x2233cc;
myEditableText.width = bgBox.width;
myEditableText.height = bgBox.height;
myEditableText.left = 0; // 设置我们的文本左边距为零
this.addChild(myEditableText);
myEditableText.displayAsPassword = true; // 添加密码显示 让文本能被显示出来.
myEditableText.wordWrap = true; // 表示文本字段是否按单词换行。如果值为 true，则该文本字段按单词换行；反之则该文本字段按字符换行。
myEditableText.addEventListener(egret.Event.CHANGE, (e: egret.Event) => {
egret.log(e.target.text); // 添加监听，监听用户的输入
}, this);