写一个好看的QTabWidget的qss样式

以下是一个简单的QTabWidget的qss样式：

QTabWidget::pane { /* 设置整个QTabWidget的背景 */
    background-color: white;
}

QTabWidget::tab-bar {
    alignment: center; /* 标签居中 */
}

QTabBar::tab {
    border: 2px solid #C0C0C0; /* 设置边框 */
    border-top-left-radius: 4px; /* 设置圆角 */
    border-top-right-radius: 4px;
    padding: 2px;
    min-width: 80px; /* 设置最小宽度 */
    font-size: 14px; /* 设置字体大小 */
    color: #000000; /* 设置字体颜色 */
}

QTabBar::tab:selected, QTabBar::tab:hover {
    background-color: #F5F5F5; /* 设置选中和鼠标悬停时的背景颜色 */
}

QTabBar::tab:selected {
    border-color: #C0C0C0; /* 设置选中时的边框颜色 */
}

你可以根据自己的需求进行修改和美化。

相关问题

qtabwidget qss

以下是一个qtabwidget qss的例子：

# 设置QTabWidget的样式
QTabWidget::pane {
    border-top: 2px solid #C2C7CB;
    position: absolute;
    top: -0.5em;
}

# 设置QTabBar的样式
QTabBar::tab {
    background-color: #C2C7CB;
    color: #000000;
    border: 2px solid #C2C7CB;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}

QTabBar::tab:selected, QTabBar::tab:hover {
    background-color: #F0F0F0;
    border-color: #C2C7CB;
}

# 设置QTabWidget下的QToolButton的样式
QTabBar QToolButton{
    background-color: #C2C7CB;
    border: none;
    border-radius: 0px;
    margin: 0px;
    padding: 0px;
    width: 16px;
    height: 16px;
}

QTabBar QToolButton:hover{
    background-color: #F0F0F0;
}
QTabBar QToolButton::menu-indicator{
    image: none;
}

QTabWidget qss设计

QTabWidget是一个常用的多页控件，可以在其中添加多个QWidget页面。以下是一个基于Material Design设计风格的QTabWidget的QSS代码，你可以根据自己的需要进行调整：

QTabWidget::pane {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
}

QTabBar::tab {
    border-bottom: 2px solid transparent;
    color: #555555;
    padding: 8px;
}

QTabBar::tab:selected {
    background-color: #FFFFFF;
    border-color: #2196F3;
    color: #2196F3;
}

QTabBar::tab:!selected:hover {
    background-color: #F5F5F5;
}

QTabBar::tab:selected:hover {
    background-color: #FFFFFF;
}

QTabBar::tab:first {
    margin-left: 0px;
}

QTabBar::tab:last {
    margin-right: 0px;
}

QTabBar::tab:only-one {
    margin: 0px;
}

QTabWidget::tab-bar {
    alignment: center;
    background-color: #F5F5F5;
    border: none;
    height: 40px;
}

QTabWidget::tab-bar:top {
    top: 0px;
}

QTabWidget::tab-bar:bottom {
    bottom: 0px;
}

QTabWidget::tab-bar:left {
    left: 0px;
    width: 120px;
}

QTabWidget::tab-bar:right {
    right: 0px;
    width: 120px;
}

QTabWidget::tab-bar:top, QTabWidget::tab-bar:bottom {
    min-width: 400px;
}

QTabWidget::tab-bar:left, QTabWidget::tab-bar:right {
    min-height: 400px;
}

这段代码实现了以下样式：

- QTabWidget的背景为#FFFFFF，边框为1px的#CCCCCC；
- QTabBar的底部边框为2px的透明边框，文字颜色为#555555，内部填充为8px；
- 选中的QTabBar的背景颜色为#FFFFFF，底部边框颜色为#2196F3，文字颜色为#2196F3；
- 鼠标悬浮在未选中的QTabBar上时，背景颜色变为#F5F5F5；
- 鼠标悬浮在选中的QTabBar上时，背景颜色变为#FFFFFF；
- 第一个和最后一个QTabBar的margin为0px；
- 只有一个QTabBar时，margin为0px；
- 可以设置QTabBar的位置为top、bottom、left、right；
- 如果QTabBar的位置是top或bottom，则最小宽度为400px；
- 如果QTabBar的位置是left或right，则最小高度为400px。

你可以将这段代码复制到你的QTabWidget的构造函数中，通过 `setStyleSheet()` 方法来应用这些样式。如下所示：

self.tabWidget.setStyleSheet('''
    QTabWidget::pane {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
    }

    QTabBar::tab {
        border-bottom: 2px solid transparent;
        color: #555555;
        padding: 8px;
    }

    QTabBar::tab:selected {
        background-color: #FFFFFF;
        border-color: #2196F3;
        color: #2196F3;
    }

    QTabBar::tab:!selected:hover {
        background-color: #F5F5F5;
    }

    QTabBar::tab:selected:hover {
        background-color: #FFFFFF;
    }

    QTabBar::tab:first {
        margin-left: 0px;
    }

    QTabBar::tab:last {
        margin-right: 0px;
    }

    QTabBar::tab:only-one {
        margin: 0px;
    }

    QTabWidget::tab-bar {
        alignment: center;
        background-color: #F5F5F5;
        border: none;
        height: 40px;
    }

    QTabWidget::tab-bar:top {
        top: 0px;
    }

    QTabWidget::tab-bar:bottom {
        bottom: 0px;
    }

    QTabWidget::tab-bar:left {
        left: 0px;
        width: 120px;
    }

    QTabWidget::tab-bar:right {
        right: 0px;
        width: 120px;
    }

    QTabWidget::tab-bar:top, QTabWidget::tab-bar:bottom {
        min-width: 400px;
    }

    QTabWidget::tab-bar:left, QTabWidget::tab-bar:right {
        min-height: 400px;
    }
''')

这样就可以将这段样式代码应用到你的QTabWidget中了。