Laya FairyGui系列四 GButton

按钮（GButton）

按钮毋庸置疑在任何引擎中都是比较常用的组件之一，FGUI中按钮的类时GButton，它包含了普通按钮，单选按钮，复选按钮，列表的Item。
它是集成GComponent类，所以它也是一个容器，它里面包含了在鼠标按钮，鼠标松开，鼠标悬浮三个状态对一个的图片资源，如果创建按钮组件时勾选了"创建文本标题" "创建图形标题"那么会多一个文本用来显示文本标题，多一个装载器用来显示图形标题。

Button_2.png

Button_3.png

创建按钮

点击主菜单"资源"->"新建按钮"打开如下界面。

Button_0.png

注意这里的名称是按钮组建的名称不是按钮的名称。
然后将新建的按钮组件托到舞台中，即创建了一个按钮组件的实例。在右边属性栏中可以修改按钮的名称。

Button_4.png

一个按钮组件可以创建出多个按钮实例。
右边基本属性中有原大小属性，修改了实例的大小会自动取消这个原大小的单选按钮，再次选中会恢复到按钮组件的大小。改变按钮组件的大小时如果按钮实例的原大小是选中状态会自动同步成按钮组件的大小，反之不会。

实例属性：

Button_1.png

这里可以修改按钮实例的属性且并不影响其他实例的属性。可以关联到指定的控制器页签。

按钮的使用

• 按钮实例获取

//获取一个名为btn_test的按钮实例
const testBtn = testCom.getChild("btn_test").asButton;

• 点击事件监听

testBtn.onClick(this,(e)=>{
    console.log("点击了按钮testBtn");
})

• 按钮屏蔽点击

//按钮置灰，但是点击事件任然有效
testBtn.grayed = true;
//按钮未置灰，但是点击事件无效
testBtn.touchable = false;
//按钮置灰且点击事件无效
testBtn.enabled = false

• 设置按钮点击的全局声音

UIConfig.buttonSound = "ui://包名/声音名";

• 单选或复选按钮设置选中状态

testRadioBtn.selected = true;

• 单选或复选按钮状态改变监听

testRadioBtn.on(fairygui.Events.STATE_CHANGED,this,()=>{
    console.log('按钮状态改变了');
})