QTabWidget样式详解
发布时间:2023-11-23 16:15:15
发布人:xqq
一、qtablewidget样式表
1、背景颜色设置
QTableWidget{
background-color: #F5F5F5;
selection-background-color: #FA8072;
}
2、表格线颜色和宽度设置
QTableWidget{
gridline-color: black;
gridline-width: 2px;
}
3、单元格内文字对齐方式设置
QTableWidget{
qproperty-alignment: AlignCenter|AlignVCenter;
}
二、qt的tabwidget
1、tab标签样式设置
QTabBar::tab {
background-color: #F5F5F5;
color: #434343;
padding: 8px;
border: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
QTabBar::tab:selected {
background-color: #FA8072;
color: #FFFFFF;
}
2、tab内容样式设置
QWidget {
background-color: #FFFFFF;
border: 2px solid #FA8072;
border-top: none;
}
QWidget#tab_1 {
background-color: #F5F5F5;
}
QWidget#tab_2 {
background-color: #FFFFFF;
}
QWidget#tab_3 {
background-color: #F5F5F5;
}
3、tab间距设置
QTabWidget::pane {
border: 2px solid #FA8072;
}
QTabWidget::tab-bar {
margin-top: 2px;
}
三、qtabwidget隐藏tab
1、方法一：设置某个标签页不可见
QTabWidget::tab-bar {
alignment: center;
}
QTabWidget::tab {
border: none;
}
QTabWidget::tab:!selected {
margin-top: 15px;
width: 0;
height: 0;
padding: 0;
border: none;
}
当某个tab不能选择时，就像该tab不存在一样，可以将它隐藏
2、方法二：隐藏整个tab栏
QTabWidget::tab-bar {
visibility: hidden;
}
可以将整个tab bar隐藏，显示选项卡只需要将tab得到焦点
四、qttablewidget排序
1、启用表头排序功能
QTableView::sorted-header {
color: #FA8072;
}
2、表头排序箭头颜色设置
QHeaderView::up-arrow { /* 箭头向上 */
width: 14px;
height: 14px;
background-image: url(up.png);
subcontrol-position: center right;
}
QHeaderView::down-arrow { /* 箭头向下 */
width: 14px;
height: 14px;
background-image: url(down.png);
subcontrol-position: center right;
}
五、qtabwidget设置表头选取
1、设置表头选取方式
QHeaderView::section {
background-color: #FA8072;
color: #FFFFFF;
padding: 4px;
border: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
QTableView::item:focus {
background-color: #F5F5F5;
}
2、启用行选取功能
QTableView::item:selected:active {
background-color: #FA8072;
color: #FFFFFF;
}
QTableView::item:selected:!active {
background-color: #F5F5F5;
}
