当前位置: 首页 > article >正文

Qt之样式表使用(十一)

Qt开发 系列文章 - stylesheet(十一)


目录

前言

一、样式表stylesheet

二、代码更改

1.特定控件样式

​编辑

2.类型选择器样式

3.ID选择器样式

三、UI上设计

四、qss文件设计

总结


前言

Qt是一个跨平台的C++图形用户界面应用程序开发框架,它提供了丰富的功能来创建美观和响应式的用户界面。样式表(Stylesheet)在Qt中用于自定义控件的外观,类似于CSS在网页中的作用。Qt样式表允许你改变窗口部件(widgets)的颜色、字体、边距等属性,使你的应用程序更具吸引力。


一、样式表stylesheet

Qt样式表的语法与CSS非常相似,你可以使用选择器来指定要改变的控件,然后使用属性和值来定义样式。另外Qt样式表支持多种选择器,包括类型选择器、属性选择器、类选择器和ID选择器。

Qt样式表的使用也有多重方式,可以直接在项目中添加代码更换、可以在可视化界面UI上添加更改、也可以通过qss文件导入的方式进行更改。

二、代码更改

创建一个新的项目,编译运行完后,有如下界面。

  

1.特定控件样式

然后再构造函数上,进行样式表的修改,先显示一个部件label1的颜色,代码如下。

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    // 修改一个部件颜色
    ui->label->setStyleSheet("QLabel {background-color: red;}");
}

2.类型选择器样式

如果要显示全部Label的颜色,则修改如下。

this->setStyleSheet("QLabel {background-color: red;}");

3.ID选择器样式

如果要改变特定部件Label的颜色,则修改如下。

this->setStyleSheet("#label_3 {background-color: red;}");

Qt样式表不仅仅是修改背景颜色,还有一些其它的指令,例如:

  1. background-color:设置背景颜色;
  2. color:设置文本颜色;
  3. font-size:设置字体大小;
  4. border:设置边框;
  5. border-radius:设置边框圆角半径;
  6. padding:设置内边距;
  7. margin:设置外边距;
  8. 等等其他设置,更为具体的参见官方文档。

Qt还允许直接在样式表中使用Qt资源文件,如  background-image:url(:/image/***.png),这使得管理和使用图像资源变得更加方便。

this->setStyleSheet("#label_3 {image: url(image/te.png)}");

Qt还引入了一些特定的伪状态,这些状态对应于Qt控件的特定状态。这些伪状态包括 :disabled:hover(用于鼠标悬停时)、:pressed(用于按钮被按下时)、:checked、:unchecked:indeterminate(对于复选框而言)等。

例如:

this->setStyleSheet("#pushButton:hover {background-color: red;}");

三、UI上设计

双击打开UI设计界面,选中Lable1右键,选择改变样式表,进行如下设计,如下图。

  

也可以修改全部Label的颜色,如下设置。

其它的一些样式属性,同理也可以在上面设置。

四、qss文件设计

QSS (Qt Style Sheets) 在支持大部分 CSS2.1 特性的基础上,还引入了一些专为 Qt 设计的独有扩展。这些扩展提高了 QSS 在定制 Qt 应用程序界面方面的能力,使得开发者可以更灵活地控制应用程序的外观。

在设计Qt软件,通过导入qss文件,可以使得设计更为便捷,将软件的样式表和程序功能开发很好的分开了,在繁忙时可以分发给不同的人设计。

在构造函数上,添加如下代码,导入qss文件。

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QString FilePath = "qss/paramsetting.qss";
    QFile file(FilePath);
    if( file.open(QFile::ReadOnly))
    {
        QString styleSheet = QString::fromUtf8(file.readAll());
        this->setStyleSheet(styleSheet);
        file.close();
        qDebug()<<"load success";
    }
    else
        qDebug()<<"load error";
}

qss文件内容如下,示例。

/*按钮QPushButton样式 应用到所有QPushButton类型的按钮*/
QPushButton {  
    background-color: #4CAF50;  
    border: none;  
    color: white;  
    padding: 10px 20px;  
    text-align: center;  
    text-decoration: none;  
    /*display: inline-block;*/
    font-size: 16px;  
    margin: 4px 2px;  
    /*cursor: pointer;*/ 
}
/*文本QLabel颜色和背景*/
QLabel {  
    color: red;  
    background-color: white;  
}
/*特定文本设置*/
#label_3 {
    image: url(image/te.png);
}
/*QLineEdit边框和圆角*/
QLineEdit {  
    border: 2px solid #000000;  
    border-radius: 5px;  
}
/*QPushButton在鼠标悬停时的背景颜色hover 悬停和焦点样式*/
QPushButton:hover {  
    background-color: #45a049; 
    image: url(:/images/arrow.png); /* 使用自定义的箭头图标 */ 	
}  
QPushButton:focus {  
    border: 2px solid red;  
}

编译运行,提示导入文件成功,显示如下设置画面。


总结

博文中相应的工程代码Qt-Case.zip 利用Qt开发软件进行编的例程,为博文提供案例-CSDN文库。

原文地址:https://blog.csdn.net/weixin_47006346/article/details/144415867
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/444051.html

相关文章:

  • 网络传输层TCP协议
  • plane开源的自托管项目
  • 2024年度漏洞态势分析报告,需要访问自取即可!(PDF版本)
  • 【权限管理】Apache Shiro学习教程
  • STM32中ADC模数转换器
  • 动手学深度学习11.1. 优化和深度学习-笔记练习(PyTorch)
  • 嵌入式驱动开发详解17(CAN驱动开发)
  • 在 Linux 下,将 tar 包打包成二进制程序
  • 【系统方案资料集】工业互联网数字中台解决方案,产业互联网数据中台解决方案,数据中台整体建设方案(Word,PPT)
  • Centos创建共享文件夹拉取文件
  • 使用Element-UI transfer穿梭框在屏幕下鼠标悬浮显示完整信息
  • 如何在 Ubuntu 22.04 上安装 MySQL
  • 《Posterior Collapse and Latent Variable Non-identifiability》
  • 【数据结构】平衡二叉树
  • 【Canvas与仪表盘】铝圈蓝底汽车速度仪表盘(可用键盘按键调节速度值)
  • 初学stm32 --- 外部中断
  • C语言与C++与Python与Java的差别
  • TCA9555芯片手册解读(6)
  • 2024年12月陪玩系统-仿东郊到家约玩系统是一种新兴的线上预约线下社交、陪伴系统分享-优雅草央千澈-附带搭建教程
  • upload-labs(1-19关)通关攻略
  • Vue零基础教程|从前端框架到GIS开发系列课程(六)组合式API
  • string
  • 【Web前端】Web API:构建Web应用核心
  • 6UCPCI板卡设计方案:8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台