egret-docs-master/extension/EUI/controls/togglebutton
guofei 4fe0162b34 fist commit 2024-06-19 13:32:32 +08:00
..
560158f61ec92.png fist commit 2024-06-19 13:32:32 +08:00
560159042f1bf.png fist commit 2024-06-19 13:32:32 +08:00
README.md fist commit 2024-06-19 13:32:32 +08:00

README.md

ToggleButton是具备状态的按钮该状态就是selected属性类型是布尔值默认为false当点击按钮selected将变为true再点击一下重新变成false。在显示上也是有区别的选中和非选中的外观是不一样的。

eui.ToggleSwitch 用来定义开关组件,包括一个开启和关闭状态的皮肤。它继承自 eui.ToggleButton ,可以使用 selected 来设置或获取其开关状态。

private initSwitch():void{
    var btn: eui.ToggleSwitch = new eui.ToggleSwitch();
    btn.label = "This is a ToggleButton";
    btn.addEventListener(eui.UIEvent.CHANGE, this.changeHandler, this);
    this.addChild(btn);
}
private changeHandler(evt:eui.UIEvent) {
    egret.log(evt.target.selected);
}

得到的效果:

下述示例中结合若干个ToggleButton可以实现类似TabBar的效果如图所示

private toggleBtns:Array<eui.ToggleButton> = [];
private initToggleBar():void {
    for (var i: number = 0; i < 4; i++) {
        var btn: eui.ToggleButton = new eui.ToggleButton();
        btn.label = i + 1 + "";
        btn.y = 100;
        btn.width = 80;
        btn.height = 60;
        btn.x = 20 + i * 80;
        btn.addEventListener(eui.UIEvent.CHANGE, this.toggleChangeHandler, this);
        this.toggleBtns.push(btn);
        this.addChild(btn);
    }
}
private toggleChangeHandler(evt: eui.UIEvent) {
    for (var i: number = 0; i < this.toggleBtns.length; i++) {
        var btn: eui.ToggleButton = this.toggleBtns[i];
        btn.selected = (btn == evt.target);
    }
}

同前面一节一样,这里也使用:

egret create HelloEUI --type eui

创建示例项目的默认皮肤。可以在示例项目的eui_skins文件夹下找到默认皮肤的 exml 文件。