控制器（Controller）

Author: 谷主

控制器是新UI系统核心功能之一，它为UI制作中以下类似需求提供了支持：
- 分页 一个组件可以由多个页面组成，并且可以在IDE里所见即所得的切换。
- 按钮状态 按钮通常有按下、鼠标悬浮等多个状态，我们可以利用控制器为每个状态安排不同的显示内容。
- 属性变化 利用控制器，我们可以使元件具有多个不同的形态，并且可以方便地切换。

一、控制器设计

控制器是GWidget类的属性，因此，所有UI组件都可以拥有控制器。如下图1-1,1-2所示展示的方式创建控制器：

（图1-1）

（图1-2）

创建成功后，如果节点是预制体的根节点，则可以在场景视图顶部快速切换这个控制器的页面，如图1-3所示：

（图1-3）

点击‘Edit’按钮，或者上图的‘c’图标，进入控制器编辑页面，如图1-4所示：

（图1-4）

名称 控制器的名称。同一组件内的控制器请不要同名。
首页 启动时控制器的默认页面。一般为0。
页面 每个页面具有索引和名称属性。页面名称是可选的，如果不填写，则代码里只能通过索引切换；如果填写，则可以通过名称切换。

二、属性控制

每个UI节点都可以在任意控制器（可以是自己的，也可以是其他节点的）切换不同页面时，改变自己的属性，这称为属性控制，每一条属性控制我们用‘Gear'这个名字表达。如下图2-1的Gears部分。

（图2-1）

点击‘+’图标后，选择需要受控制的属性，如图2-2所示：

（图2-2）

举例，选择‘X’属性，表示需要在不同控制器页面下设置不同的坐标X值，显示如下图2-3：

（图2-3）

Controller 可以选择本节点的控制器，也可以选择其他节点的控制器。
Property 表示当前受控的属性，这是不可修改的。
Tween 使用动画效果。举例，页面1和页面2的X坐标分别是100和200，当从页面1切换到页面2时，如果不使用动画效果，则X坐标立即变成200；如果使用动画效果，那X值将经历从100到200的缓动变化。点击创建实例后显示下图：

（图2-4）

Enabled 是否使用动画效果。
- Ease Type 时间/速度曲线。
- Duration 整个缓动过程持续的时间。单位毫秒。
- Delay 控制器页面切换后，延迟一定时间再开始缓动。单位毫秒。

在Gear界面上，我们并没有看X值的设置。当我们需要为不同页面设置不同的X值时，只需要切换不同的控制器页面，然后直接调整组件的X坐标即可，IDE会自动记录组件在不同页面的X坐标值，无需额外操作。特别地，如果选择的是‘Visible’属性，则显示的界面和操作的方式有所不同。‘Visible’属性控制的显示界面如下图2-5：

（图2-5）

这里的‘Visible’并不对应组件自身的‘Visible’属性，它是一个独立的、额外的标志位用于控制节点的可见性。

Pages 在这里选择一个或多个页面，在这些页面里，组件将可见；否则不可见。
Condition 如果有多个‘Visible’属性的Gear，这些Gear之间将通过这里设置的逻辑操作计算最终的结果。举例，如果一个Gear设置了页面1可见，第二个Gear设置了页面2可见，当Condition是‘与’时，在页面1和页面2组件都不可见；当Condition是‘或’时，在页面1和页面2组件都可见。
可见性的控制还有一个自动延迟兑现的特性。举例，如果一个组件建立了一个可见性控制，使其在第一页可见，第二页隐藏；同时，建立了一个坐标X的控制，在第一页的坐标是100，第二页的坐标是200，并且启用了动画效果。当控制器从第一页切换到第二页时，组件并不会立刻隐藏，而是等X坐标从100移动到200的动画播放完毕再隐藏。

三、和按钮的联动

控制器可以与按钮联动，当普通按钮被按下，或单选/复选按钮选中状态变化时，控制器的页面随之改变。相关属性位置如下图3-1：

（图3-1）

设置完成后，根据按钮的类型不同会有不同的反应：

普通按钮 当按钮被点击时，控制器跳转到指定的页面。
单选按钮 当按钮状态从不选中变成选中时，使控制器跳转到指定的页面。

当控制器从其他页面切换到指定页面时，按钮变为选中状态。

当控制器从指定页面切换到其他页面时，按钮变成不选中状态。

复选按钮 当按钮状态从不选中变成选中时，使控制器跳转到指定的页面。当按钮状态从选中变成不选中时，使控制器跳转到除指定页面外的另外一个页面。例如如果控制器具有页面0和1，指定页面是0，当按钮状态从选中变成不选中时，控制器跳转到页面1。

当控制器从其他页面切换到指定页面时，按钮变为选中状态；

当控制器从指定页面切换到其他页面时，按钮变成不选中状态。

这个特性一般用来实现单选组（RadioGroup）假设目前有3个单选按钮，他们是互斥的，也就是同一时间只有一个按钮是选中状态。这样的设计通常称为单选组。我们可以新建一个含有3个页面的控制器，将每个按钮的单选控制分别连接到这个控制器的3个页面，就实现了这个单选组。

在程序中，要获得或设置哪个按钮被选中也非常简单，使用控制器的selectedIndex或者selectedPage方法就可以了。

如果再将其他元件的属性控制绑定到这个控制器，例如将各种UI内容使用显示控制安排到各个页面后，那么一个传统意义上的TabControl也实现了。因此新UI系统中没有内置的TabControl，RadioGroup这些复合组件，这些都可以通过控制器简单地实现。

四、和下拉框的联动

控制器可以与下拉框联动，当下拉框选择发生改变时，控制器也同时跳转到相同索引的页面。反之亦然，如果控制器跳转到某个页面，那么下拉框也同时选定相同索引的项目，如图4-1所示：

（图4-1）

五、和Selection的联动

控制器可以与Selection联动，当Selection发生改变时，控制器也同时跳转到相同索引的页面。反之亦然，如果控制器跳转到某个页面，那么也会同时选定相同索引的项目。

（图5-1）

六、常用API

运行时，控制器常用的API有：

let c1 = aWidget.getController("c1");

//通过索引设置控制器的活动页面
c1.selectedIndex = 1;

//也可以使用页面的名称设置
c1.selectedPage = "page_name";

//获得控制器当前的活动页面
console.log(c1.selectedIndex); 

//还有更简单的方式改变控制器页面
aWidget.setPage("c1", 1);

控制器改变时有通知事件：

c1.on(Laya.Event.CHANGED, ()=> {
    console.log(c1.selectedIndex);
});

控制器