UI编辑器案例：Tab页

1. 需求 1. 显示一个界面，界面左侧是一个切页按钮列表，点击切页按钮可以切换Tab页； 2. 每个Tab页是一个按钮列表，按钮上面有一些文字，点击按钮可以显示按钮上面的文字； 2. 拼界面 我们首先需要拼好这个需求所对应的界面。 2.1 根节点`lyr_tab_area` 由于我拼的不是一个全屏的界面，只是有一部分显示区域的界面，所以在`root`下面新建了一个自己的根节点管理所有的界面控件。 2.2 底板`spt_bg` 然后，给这个界面配置一个底板。用一个九宫图片即可。 2.3 内容区域`lyr_contents` 右边会有一大块区域显示每个tab页的具体内容，因此拼一个节点在这里管理这个区域。 2.4 内容列表`list_contents` 每个内容是一个按钮，会有多个内容，因此我把他拼到一个垂直滚动列表中。 2.5 tab区域`lyr_tabs` 左侧的区域是tab的切换按钮，因此拼一个节点在这里管理这个区域。 2.6 tab区域底板`spt_tabs_bg` 为了区分tab区域和内容区域，我们给tab区域配一个底板，同样也是一个九宫图片。 2.7 tab列表`list_tabs` 每个tab其实也是一个按钮，会有多个tab，因此我把他拼到一个垂直滚动列表中。注意这里的tab要用多选按钮多选按钮，这是为了方便tab的实现，后续会详细说到。 2.8 关闭按钮`btn_close` 最后，我们拼一个关闭界面的按钮，就大功告成了。 3. 界面初始化 界面初始化时要将需要显示的信息显示在界面上。 3.1 界面信息配置 首先我们配置一下界面需要显示的信息。我这里为了演示功能随便写了一些界面信息，大家可以根据自己的需求配置。 3.2 设置多选按钮组 终于到了最重要的功能：多选按钮组。 多选按钮组指的是一组多选按钮，这一组多选按钮最多只允许有1个按钮为`true`状态，当其中一个按钮变成`true`状态时，原本`true`状态的按钮会转为`false`状态。 这个多选按钮组的功能正好符合我们所希望的Tab标签的功能，因此我们可以直接用多选按钮组实现Tab标签。前文提到的Tab按钮要用多选按钮的原因也是在于此。 首先我们先设置一些必要的局部变量方便后续编写，并根据界面配置设置`list_tabs`的列表项数。 然后设置多选按钮组。 最后来个加分项，默认选中第一个～ 4. `cbtn_tab`功能的实现 接下来我们来实现选中tab标签的回调。 首先我们设置必要的变量，并根据触发多选按钮在多选按钮组中的索引值获取对应的配置信息，根据配置信息设置`list_contents`的列表项数。 然后遍历这个列表，将其文本内容设置为界面配置信息中的值。 5. `btn_content`功能的实现 因为需求很简单，所以一个节点搞定。 6. `btn_close`功能的实现 这个也很简单，一个节点搞定。