---
url: https://www.aardio.com/zh-cn/doc/library-guide/std/win/ui/tabs/_.html.md
---

# 高级选项卡（win.ui.tabs）使用指南

aardio 有两种不同的选项卡：

1. 简单选项卡控件（ win.ui.ctrl.tab  ）

    简单选项卡是由 win.ui.ctrl.tab 类库基于系统 SysTabControl32 控件实现的选项卡。可在窗体可视化设计器上直接拖放添加选项卡控件，控件创建参数中指定的 cls 类名为 "tab"。

    关于简单选项卡的用法请参考: [简单选项卡使用指南](../ctrl/tab.md)

2. 高级选项卡（ win.ui.tabs  ）

    高级选项卡由 win.ui.tabs 类库实现。高级选项卡并不是一个控件，而是用于管理 plus 控件（ win.ui.ctrl.plus ）组成的按钮列表（ tab button list ）以实现选项卡效果的管理组件，并由 custom 控件（ win.ui.ctrl.custom ）创建的容器控件（ tab panel ）加载并管理一组显示内容的子窗口（ tab forms ）。

下面介绍高级选项卡的用法。 


## 创建高级选项卡的步骤

1. 创建高级选项卡。

    要点： 
    - 在窗体上添加两个 plus 控件 mainForm.tabButton1, mainForm.tabButton2 ，这些 plus 控件显示在选项卡头部（ header ）位置作为切换页面的按钮，并且这被指指的 plus 控件将被用于确定选项卡的外观与排列方向。如果后继用代码添加更多选项卡则会根据 mainForm.tabButton1, mainForm.tabButton2 获取的控件属性与样式作为模板创建新的 plus 控件。
    - 在窗体上添加一个 custom 控件 mainForm.tabPanel 作为页面容器，用于在选项卡的客户区（ client area ）加载子窗口以显示不同的页面内容。

    示例代码：

    ```aardio
    import win.ui;
    import win.ui.tabs;
    /*DSG{{*/
    var mainForm = win.form(text="多标签页窗口示例";right=600;bottom=400)
    mainForm.add( 
    tabButton1={cls="plus";text="标签页 1";left=149;top=2;right=265;bottom=36;align="left";color=32768;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF00A';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=2};
    tabButton2={cls="plus";text="标签页 2";left=14;top=2;right=148;bottom=36;align="left";color=32768;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF11C ';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=3};
    tabPanel={cls="custom";left=2;top=37;right=600;bottom=401;bgcolor=0xFFFFFF;db=1;dl=1;dr=1;dt=1;z=1};
    )
    /*}}*/

    //创建高级选项卡，参数指定两个选项卡按钮并用以确定选项卡头部（ header ）按钮的外观样式与排列方向。
    var tabs = win.ui.tabs( 
        mainForm.tabButton1,//选项卡头部按钮1
        mainForm.tabButton2,//选项卡头部按钮2
    );
    ```

    参数中的 mainForm.tabButton1， mainForm.tabButton2 指定选项卡最初的 2 个按钮，这 2 个按钮将作为模板控件用于确定选项卡按钮的排列方向、间距、默认外观样式。可以通过 tabs.tabList 属性访问包含所有选项卡按钮的数组。

    高级选项卡会自动查找紧贴在选项卡按钮（  mainForm.tabButton1， mainForm.tabButton2 ）一侧的 custom 控件（ 优先选择未禁用、未隐藏、未设置透明的 custom 控件，上面的示例会 mainForm.tabPanel ）作为页面容器（ tab panel ）。可以通过 tab.panel 属性访问页面容器控件。tabs.panel 用于确定选项卡的内容区域（ client area ）。

2. 设置选项卡交互样式

    创建高级选项卡对象 tabs 以后，我们可以如下设置 tabs 的外观样式。

    ```aardio
    tabs.skin({
        background={
            active=0xFFFFFFFF;
            default=0x00FFFFFF;
            hover=0x38FFFFFF
        };
        color={
            default=0xFF0F0000; 
        };
        checked={
            background={default=0xFFFFFFFF;};
            color={default=0xFF42A875;};
        }
    })
    ```

    这个 skin 函数的用法与 plus 控件的 skin 函数完全相同，win.ui.tabs 会将上面的样式逐一应用到每一个选项卡按钮。

    相关文档:
    - [plus 控件使用指南](../ctrl/plus.md) 
    - [plus 控件参考手册](../../../../../library-reference/win/ui/ctrl/plus.md)

## 添加选项卡与加载子窗口 <a id="loadForm" href="#loadForm">&#x23;</a>

创建高级选项卡对象 tabs 以后，我们可以如下使用 tabs 对象创建新的选项卡按钮，并为每个选项卡按钮绑定一个子窗口用于显示选项卡内容。

示例：

```aardio
// 添加新的选项卡按钮。
var tabIndex = tabs.add({
    text="标签页3";
    iconText='\uF0E0';//选项卡字体图标
})

// 添加新的子页面，第一个参数指定要绑定的选项卡按钮索引。
var formPage1  = tabs.loadForm(1)

// formPage1 就是一个 winform，用法与 winform.add 相同
formPage1.add({
    button1 = { 
            cls="button";
            text="按钮1";
            left=20;top=20;right=120;bottom=50;
    };
})

//设置当前选项卡索引为 1 。
tabs.selIndex = 1;
```

我们使用 tabs.add 函数增加新的选项卡。要特别注意 `tabs.add()` 的返回值是一个表示新选项索引的数值，也就是说 tabs.add 返回的是 tabIndex 。

并且使用 tabs.loadForm 函数增加新的子窗口，这个函数的原型如下：

`tabs.loadForm( tabIndex,formOrFormPathOrFormPropertiesTableOrNull )`
`tabs.loadForm( formOrFormPathOrFormPropertiesTableOrNull )`

这个函数非常特别，省略 tabIndex 参数时可以同时省略参数占位。aardio 中其他函数省略的参数如果不是最后一个参数一般仍然需要写一个逗号以保持参数位置不变。 

tabIndex 参数指定了子窗口要绑定的选项卡按钮索引。如果不指定索引，则会自动跳过已绑定子窗体的选项卡，添加到下一个还没有绑定子窗体的选项卡。也就是说省略索引则索引参数将被默认设为 `#tabs.forms + 1` 。

@formOrFormPathOrFormPropertiesTableOrNull 这个参数允许指定不同类型的参数：

- form: 指定一个创建好的 win.form 窗口对象。
- formPath: 指定一个加载并返回 win.form 窗口对象的 aardio 代码文件路径。
- formPropertiesTable: 直接指定一个表对象（table）作为创建 win.form 窗口对象的属性表参数。
- null: 不指定参数，保持 null 值则默认创建一个窗口。

tabs.loadForm( tabIndex ) 返回的是 win.form 窗体对象。

tabs.loadForm 函数返回 winform（ win.form 对象 ） 窗口对象。

tabs 加载的所有子窗口被放在 tabs.forms 这个数组对象中。

用户点击选项卡按钮时，高级选项卡会在 tab.panel 这个页面容器中显示对应的子窗口。具体来说用户点击并切换到 tabs.tabList[1] 则会在 tab.panel 显示 tabs.forms[1] 这个子窗口。


## 高级选项卡完整示例

创建与使用「高级选项卡」的完整示例代码如下：

```aardio
import fonts.fontAwesome;
import win.ui.tabs;
import win.ui;
/*DSG{{*/
winform = win.form(text="「高级选项卡」";right=1040;bottom=642;bgcolor=0xFFFFFF;border="none")
winform.add(
tabButton1={cls="plus";text="标签 1";left=86;top=5;right=182;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF007';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=3};
tabButton2={cls="plus";text="标签 2";left=182;top=5;right=278;bottom=40;align="left";color=0xFFFFFF;dl=1;dt=1;font=LOGFONT(h=-16);iconStyle={align="left";font=LOGFONT(h=-19;name='FontAwesome');padding={left=12;top=4}};iconText='\uF288';notify=1;paddingLeft=1;paddingRight=1;paddingTop=3;textPadding={left=39;bottom=1};x=0.5;y=0.2;z=6};
tabPanel={cls="custom";left=0;top=40;right=1040;bottom=643;bgcolor=0xFFFFFF;db=1;dl=1;dr=1;dt=1;z=1};
titleBarBackground={cls="bkplus";left=0;top=0;right=1042;bottom=41;bgcolor=0xE48900;dl=1;dr=1;dt=1;z=2};
titleBarCaption={cls="bkplus";text="标题";left=35;top=12;right=92;bottom=31;color=0xF0CAA6;dl=1;dt=1;font=LOGFONT(h=-16);z=5};
titleBarIcon={cls="bkplus";text='\uF00B';left=6;top=9;right=35;bottom=34;color=0xF0CAA6;dl=1;dt=1;font=LOGFONT(h=-18;name='FontAwesome');z=4}
)
/*}}*/

/*
创建「高级选项卡」。
参数至少要指定 2 个选项卡按钮（必须是 plus 控件）以确定选项卡的布局与排列方式（水平还是垂直）与基本样式。
*/
var tabs = win.ui.tabs( winform.tabButton1,winform.tabButton2);

//设置「高级选项卡」样式
tabs.skin({
	foreground={
		active=0xFFFFFFFF;
		default=0x00FFFFFF;
		hover=0x38FFFFFF
	};
	color={
		default=0xFFFFFFFF; 
	};
	checked={
		foreground={default=0xFFFFFFFF;}; 
		color={default=0xFF42A875;};
	}
})

// 添加新的选项卡（也就是创建 plus 控件，参数表可指定 plus 按件的初始化属性）。
var tabIndex3 = tabs.add({
	text="标签 3";//至少要指定 text 字段，其他属性如未指定则由 win.ui.tabs 自动指定
	iconText='\uF0E0';//按钮的字体图标，必须用单引号包围 Unicode 转义字符，双引号里不处理转义。
})

// 添加新的子页面（返回 win.form 对象）。
var formPage1 = tabs.loadForm(1);//参数指定要绑定的选项卡按钮索引
 
//  在窗体上添加控件
formPage1.add({
   button1 = { 
    	cls="button";  //控件类名，对应 win.ui.ctrl.button 类
    	text="按钮1";
    	left=20;top=20;right=120;bottom=50;
   };
})

// 响应子窗体上的按钮事件
formPage1.button1.oncommand = function(){
	formPage1 .msgbox("hello")
}

// 创建新的子页面。
var formPage2 = tabs.loadForm(2)
//tabs.loadForm(2,"/res/tabs/formPage2.aardio") //也可以预加载创建窗体的代码文件（使用窗体时才会真正载入）

var formPage3 = tabs.loadForm(3);

import web.view;
var wb = web.view(formPage3);
wb.html = "<body>这是网页 HTML 代码</body>"
 
//指定当前选项卡
tabs.selIndex = 1;

/*
因为我们在创建窗体时指定了 border="none" 参数，所以 winform 是无边框窗体。
下面我们用 win.ui.simpleWindow 添加窗口阴影边框、标题栏与标题栏最小化、最大化、关闭按钮，
win.ui.simpleWindow 的标题栏背景是透明的，标题栏按钮的字体默认是白色。
我们可以调用 win.ui.simpleWindow 对象的 skin 函数修改按钮样式，
也可以在窗口上用 titleBarBackground 这样的背景控件自绘标题栏背景。 
*/
import win.ui.simpleWindow;
win.ui.simpleWindow( winform );

winform.show();
return win.loopMessage(); 
```