QT样式表使用

2024-07-05 23:14| 来源: 网络整理| 查看: 265

1.前言 QT使用样式表通常有三种方式： 1. 在UI设计器---Qt Designer 内添加并设置样式；优点：直观显示。缺点：样式比较多时，不利于检查样式是否编写错误。同时不可以二次修改，即界面显示完毕后无法通过此方法修改界面的样式，只能靠代码去修改。 2. 在代码内直接使用样式；优点：此种方法很方便，也很快捷。可以随时设置样式，改变样式，根据不同条件设置不同的样式，而不像第一、第三种方法直接设置固定样式。缺点：当样式内容较复杂时，不利于查看，同时可能为了编码风格美观需要将样式内容换行等，这样可能会导致样式错误，根本没有效果，导致需要多次调试，浪费不必要的时间。 3. 将样式添加在文件内，以读取文件的方式来设置样式；优点：这种方法在界面样式较复杂时，我们在文件中编写样式，内容比较清晰，样式编写格式错误更加明显。同时也便于修改，同时一些文件编辑器能够自动给出样式输入提示，提供高编码效率。缺点：一般样式表文件都会加载到程序资源文件中，所以这里需要单独加载一个文件。同时跟第一种方法一样，不可以二次修改，当界面显示完毕后，只能靠调用setStyleSheet方法再次修改。 2.QPushButton和QToolButton 鼠标普通态、停留态、按下态

以QPushButton为例：

/*按钮普通态*/ QPushButton { /*字体为微软雅黑*/ font-family:Microsoft Yahei; /*字体大小为20点*/ font-size:20pt; /*字体颜色为白色*/ color:white; /*背景颜色*/ background-color:rgb(14 , 150 , 254); /*边框圆角半径为8像素*/ border-radius:8px; } /*按钮停留态*/ QPushButton:hover { /*背景颜色*/ background-color:rgb(44 , 137 , 255); } /*按钮按下态*/ QPushButton:pressed { /*背景颜色*/ background-color:rgb(14 , 135 , 228); /*左内边距为3像素，让按下时字向右移动3像素*/ padding-left:3px; /*上内边距为3像素，让按下时字向下移动3像素*/ padding-top:3px; } 3.QLabel设置前景色、背景色、字体大小、字体类型 QLabel { font-family: "Microsoft YaHei"; font-size: 14px; color: #BDC8E2; background-color: #2E3648; } 4.QLineEdit边框、背景颜色设置 QLineEdit { border: 1px solid gray; /* 边框 */ border-radius: 4px; /* 边框圆角 */ padding: 0 8px; /* 内容与边框距离 */ background: white; /* 背景颜色 */ selection-background-color: darkgray; /*所选内容的背景颜色*/ } 5.QComboBox边框、标识设置 //下面设置针对下拉框整体设置 QComboBox { border:1px solid gray ; #设置边框 border-radius: 3px ; #设置圆角 padding : 1px 2px 1px 2px ; # 针对于组合框中的文本内容 } //下面设置针对下拉框下拉标识（箭头） QComboBox::drop-down { subcontrol-origin: padding; #针对标识图标的位置设置 subcontrol- position : top right ; width : 20px ; border-left-width : 1px ; #针对标识图标四周属性 border-left-color : darkgray; border-left-style : solid ; /* just a single line */ border-top-right-radius: 3px ; /* same radius as the QComboBox */ border-bottom-right-radius: 3px ; } //下面设置针对下拉框下拉标识图片设置 QComboBox::down-arrow { image: url (:/misc/down_arrow.png); } 6.QTableWidget 边框线和间隔线样式 //如下代码设置横向表格头的间隔线，有四个方向的间隔线,不需要间隔线的可以设置为0px ui.myTableWidget->horizontalHeader()->setStyleSheet( "QHeaderView::section{" "border-top:0px solid #E5E5E5;" "border-left:0px solid #E5E5E5;" "border-right:0.5px solid #E5E5E5;" "border-bottom: 0.5px solid #E5E5E5;" "background-color:white;" "padding:4px;" "}" ) //如下代码设置纵向表格头的间隔线，有四个方向的间隔线,不需要间隔线的可以设置为0px ui.myTableWidget->verticalHeader()->setStyleSheet( "QHeaderView::section{" "border-top:0px solid #E5E5E5;" "border-left:0px solid #E5E5E5;" "border-right:0.5px solid #E5E5E5;" "border-bottom: 0.5px solid #E5E5E5;" "background-color:white;" "padding:4px;" "}" ) //如下代码设置列表左上角第0行第0列的那个格子的边框线 ui.myTableWidget->verticalHeader()->setStyleSheet( "QTableCornerButton::section{" "border-top:0px solid #E5E5E5;" "border-left:0px solid #E5E5E5;" "border-right:0.5px solid #E5E5E5;" "border-bottom: 0.5px solid #E5E5E5;" "background-color:white;" "}" ) 7. 窗体背景图片设置

例如: 设置主窗体背景图片为 new_back.png

QWidget#MainWindow { image: url(:/new/prefix/resource/new_back.png); } 8. 控件背景图片自适应使用 background-image

来设置背景图片，但是当背景图尺寸与控件尺寸不同时，就会出现，控件背景图显示的是多个要设置的图片，或者是没有显示完整。

#testButton { background-image:url(":/images/cancel_normal.png"); } 使用 border-image #testButton2 { border-image:url(":/images/cancel_normal.png"); }

来设置图片背景，因为border-image会自动适应控件大小，并且设置为背景图如果同时指定了两个属性，那么将会使用border-image 绘制覆盖掉background-image。简单使用例子如下：

QString styleSheet = QString( "QPushButton {border-image:url(":/images/cancel_normal.png");background-color:transparent;border:none;}" //Normal "QPushButton:hover {border-image:url(":/images/cancel_hover.png");background-color:transparent;}" ) QBtn->setStyleSheet(styleSheet); 9.字体样式 //假设窗体中有子控件，默认字体12px，父类类型是QWidget，父类类名是Widget //下面几种方法只会设置主窗体的字体，子控件不会应用，需要按个调用setFont QFont font; font.setPixelSize(20); this->setFont(font); this->setStyleSheet("{font:26px;}"); this->setStyleSheet("QWidget{font:26px;}"); this->setStyleSheet("Widget{font:26px;}"); //下面才是通过样式表设置整个控件+子控件的字体 this->setStyleSheet("font:26px;"); this->setStyleSheet("*{font:26px;}"); this->setStyleSheet("QWidget>*{font:26px;}"); this->setStyleSheet("Widget>*{font:26px;}"); //下面设置全局字体 qApp->setFont(font); 附注在不改变原有的样式下，添加附加新样式的方式： void setNewStyleSheet(QString styleSheet) { //获取到原来的样式 QString oldStyleSheet = this->styleSheet(); styleSheet += oldStyleSheet; this->setStyleSheet(styleSheet); } QPushbutton或者QToolButton 的背景图片自动缩放，自适应按键大小 QPushButton *button = new QPushButton(this); button->setGeometry(50, 50, 100, 50); button->setStyleSheet("border-image:url(:/timg.jpg)"); connect(button, &QPushButton::pressed, [=](){ button->setStyleSheet("border-image:url(:/myico.ico)");} ); connect(button, &QPushButton::released, [=](){ button->setStyleSheet("border-image:url(:/timg.jpg)"); } ); QT工程加载一个样式表 QFile file(":/qss/stylesheet/mysheet.qss"); file.open(QFile::ReadOnly); QString styleSh = tr(file.readAll()); setStyleSheet(styleSh); file.close();

【本文地址】

QT样式表使用

QT样式表使用

今日新闻

推荐新闻