二、Qt样式表

最新推荐文章于 2023-12-13 13:51:42 发布

原创最新推荐文章于 2023-12-13 13:51:42 发布 · 607 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#qt #开发语言

本文介绍了如何在Qt环境中进行界面样式设置，包括字体颜色、背景填充、控件颜色等，以及如何添加和使用资源文件。同时，详细讲解了如何设置窗口背景图片、边框样式以及控件在鼠标悬停和按下状态时的样式变化。还展示了如何利用QPixmap和QMovie展示图片和动态图。

1、样式设置

QPushButton{color:red}；//前置字体设置为红色
background-color: rgb(255, 85, 255)//背景填充为紫色
QPushButton,QLineEdit,QComboBox{color:red}//将QPushButton,QLineEdit,QComboBox都设置为红色
QPushButton{color:red;background:blue}将前置字体设置为红色，背景设置为蓝色，用分号隔开

2 添加一个资源文件到工程

在工程目录右键–》添加新文件（Add New）–》Qt–》Qt Resource–》设置文件名–》完成
添加文件到资源文件
添加前缀（Add Prefix）–》选中文件（Add Files）–》添加–》保存（Ctrl+S）

（1）设置主窗口背景图片
border-image: url(:/pic/bg.jpg);//这样设置会继承给窗口里面的每个控件
QMainWindow{border-image: url(:/pic/bg.jpg);}//不会继承设置
（2）设置边框
//QLineEdit#lineEdit{ //在窗口样式表中 #标注哪一个对象
QLineEdit{ //在控件样式表中
border:2px solid green; //设置边框大小和颜色
border-radius:25px; //设置倒角像素（不能大于最短边长的一半）}

2px: 这是边框的宽度。

solid: 这是边框的样式。在这里，边框样式被设置为“solid”，表示实线边框。如“dotted”（点线）、“dashed”（虚线）等。

green: 这是边框的颜色。例如具体的颜色名称（如“red”、“blue”、“yellow”等）、十六进制表示（如“#FF0000”）、RGB 表示（如“rgb(255, 0, 0)”）等。

QLineEdit{border-with:0;border-style:outset}
QPushButton{border-with:0;border-style:outset}
在这里插入图片描述
(3)鼠标移动到当前控件的时候，样式变化
QPushButton#pushButton::hover{ //指定某一个控件
QPushButton::hover{ //指定所有的控件 background-color:rgb(255,0,0);}

参数	作用
:active	选中处于活动（被点击）状态的元素。当用户点击一个元素并保持鼠标按下时，该元素就处于活动状态
:focus	选中获取焦点的元素。通常用于输入元素（如文本框、下拉框等），当用户点击或通过 Tab 键进入输入元素时，该元素就处于焦点状态。
:visited	选中已访问过的链接。这个选择器仅适用于链接（标签），用于设置已经被访问过的链接的样式
:disabled	选中被禁用的元素。这个选择器可以应用于各种表单元素，如输入框、按钮等，用于设置其禁用状态的样式

（4）按下的时候样式发生变化
QPushButton:pressed{
background-color:rgb(85,170,127);
color:rgb(255,255,255);
}
如果指定某个控件做按下时样式发生变化
QPushButton:pressed#pushButton_3{
color:rgb(0,0,255);
}

注意：区别hover 类名#对象名::hover
pressed 类名：pressed#对象名

代码实现

   //label 需要像素显示颜色 Qpix
    QPixmap pix(50,50);
    pix.fill(Qt::green);
    //用标签的大小
    pix = pix.scaled(ui->label->size());
    ui->label->setPixmap(pix);

    //标签显示图片
    QPixmap pix1(":/pic/qq_32px.ico");
    ui->label_2->setPixmap(pix1);
    //ui->label_2->setScaledContents(true);//允许图片缩放setscaledcontents

    //标签显示动图
    QMovie *move1 = new QMovie(":/pic/background.gif");\
    move1->start();
    move1->setScaledSize(ui->label_3->size());
    ui->label_3->setMovie(move1);
    ui->label_3->setScaledContents(true);

按钮显示图片

ui->btnicon->setIcon(QIcon(":/pic/QQ2.jpg"));

在这里插入图片描述

this->setWindowOpacity(0.8);
this->setFixedSize(600, 400);//设置大小
this->setWindowFlag(Qt::FramelessWindowHint)；//去掉标题栏

在这里插入图片描述
2.
3.
4.