qt开发-13_QTabWidget

QTabWidget 继承 QWidget，QTabWidget 类提供了一组选项卡（多页面）小部件。QTabWi
dget 主要是用来分页显示的，每一页一个界面，众多界面公用一块区域，节省了界面大小，很
方便的为用户显示更多的信息。类似浏览器的多标签页面，所以这个控件在实际项目中也会经
常用到。就比如浏览器上方开的多个页面，点击就能切换。

创建好 widget 项目后打开 ui 界面，找到 tab widget:

 为了效果明显一点，我们改一下背景颜色， 选中右边的 tab 右键 改变样式表 ：

QWidget{background-color:gray}
QWidget{background-color:red}

我们选中 tabwidget 在下面可以找到

这个可以按钮可以在标签页加上一个 ×

但是要真正起作用要加槽函数。

void Widget::on_tabWidget_tabCloseRequested(int index)
{
    ui->tabWidget->removeTab(index);
}

就有效果了。

右键 qtabwidget 可以添加页：

属性最下面可以改名字：

我们从控件表 listwidget 拖入界面上，调整大小,双击添加选项：

改变一下他的样式表：

QListView{
background-color: #dddddd;
border:none
}
QListView::item{height: 50px}

QListView::item:selected{background-color: #ffffff;color:#000000}

这样在点击的时候就会有不一样的效果：

然后我们选中这两个东西，构建一个水平布局，调整一下 listwidget 的最大宽度。

改变一下 QTabWigdet 的样式表：

QTabWidget{border:none}
QTabBar::tab{width:0px;height:0px}

然后让我们把这两个联动起来，右键 listwidget 转到槽：

void Widget::on_listWidget_currentRowChanged(int currentRow)
{
    ui->tabWidget->setCurrentIndex(currentRow);
}

然后就可以联动了：

设置一下随窗口变化而变化：

把这个调成 nofocus,可以消除初始选中的蓝色边框

 

最终效果就做好了：