QTabWidget样式详解

小蓝 • 2024-12-22 16:07 • 编程

一、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;
}

以上就是对qtabwidget样式的详细介绍，根据自己的需求，可以灵活运用不同样式组合出自己想要的效果。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/286071.html