QT样式设计
- 一、QT工程中添加资源文件
- 1.资源文件:
- 2. 添加步骤:
- 3. 新增资源文件以及删除现有的资源文件
- 4. 使用资源文件
- 二、QT中的qss语句(样式设计语句)
- 1. 样式设计
- 2.常见的qss语句
- 示例代码:
一、QT工程中添加资源文件
1.资源文件:
指的是QT程序中需要用到的素材(比如:图片,音频,视频)
2. 添加步骤:
- 在QT工程中新建一个文件夹,把需要的资源(图片)全部存放到该文件夹中
- 右键点击工程名,选择添加add new–》选择QT–》QT resource file(资源文件)
- 点击添加–》添加前缀(add prefix),然后再次点击添加–》添加文件(add files),把之前你准备好的资源添加进来并保存即可在左边栏生成资源文件
3. 新增资源文件以及删除现有的资源文件
- 新增资源文件:右键点击资源文件最顶层的目录名,选择添加现有文件即可
- 删除现有的资源文件:右键点击资源文件名,选择删除文件即可
4. 使用资源文件
- 右键点击组件–》选择改变样式表–》选择添加资源(三种不同的图片样式背景图片、边框图片,图片)
二、QT中的qss语句(样式设计语句)
1. 样式设计
\quad 指的是让界面设计得更加好看(比如:文字颜色,背景图片,改变倒角,文字对齐…)
QT中的样式设计,就跟计算机前端(css)中设计网页的样式类似
右键改变样式表–》打开QT的样式编辑器(有局限性,只能让你设置四种样式)–》添加资源,添加渐变色,添加颜色,添加字体
如果你要设置其它样式,需要程序员自己写代码(把所知道的qss语句写在样式表的下面)
2.常见的qss语句
红 绿 蓝
background-color: rgb(85, 255, 255); //设置背景颜色(按钮,标签的背景颜色)
color: rgb(85, 255, 255); //设置前景色(文字的颜色)
background-image: url(:/new/prefix1/pic/3.jpg); //设置背景图片(不会拉伸图片)background-image: url(你需要的图片的绝对路径);background-image: url(:你的资源文件的路径名);区别:如果使用绝对路径,就不需要加冒号如果使用资源文件的路径就需要加冒号
border-image: url(:/new/prefix1/pic/2.jpg); //设置边框图片(边框图片跟组件的大小保持一致)border-image: url(你需要的图片的绝对路径);
border-radius:15px; //把倒角设置为15个像素倒角的大小不能超过组件高度的一半
border:2px solid#ff0000; //把边框的宽度设置为2个像素,颜色设置成ff0000
QPushButton:pressed{ 设置按钮按下的时候背景图片,主界面的样式中使用background-image: url(:/button_down.png);
}
QPushButton:pressed#regBt{ 设置指定按钮regBt按钮按下时候背景图片,主界面的样式中使用background-image: url(:/button_down.png);
}
QPushButton:hover{ 主界面的样式中使用background-color:#ff00ff; 鼠标进入控件设置背景颜色
}
QMainWindow{border-image: url(:/new/prefix1/pic/3.jpg);} //让图片只作用于主窗口
注意:
- QT中路径的写法跟window不一样
比如:window路径 C:\Users\PC\Desktop\share
QT中要求改写成: C:/Users/PC/Desktop/share
QT工程存储的路径不可以使用中文路径,但是QT的代码中可以使用中文路径 - 资源文件路径名跟非资源文件路径名写法的区别
资源文件路径名: 冒号/new/prefix1/image/某张图片
比如: :/new/prefix1/image/3.jpg
非资源文件路径名: C:/Users/Administrator/Desktop/share/1jpeg
示例代码:
loginwin::loginwin(QWidget *parent): QMainWindow(parent), ui(new Ui::loginwin)
{ui->setupUi(this);//通过写代码把登录界面的ui做出来//第一步:标签//父窗口:这个组件(控件)等一会在哪个窗口上显示,这个窗口就是父窗口QLabel *lb1=new QLabel("学生管理系统",this);//设置按钮的坐标,宽高/*规律:任何组件,属性都有对应的设置方法,方法的名字统一叫做setxxx()比如:属性geometry --》对应的方法setGeometry()*/lb1->setGeometry(200,10,400,100);QFont myfont("楷体",24);lb1->setFont(myfont);//设置样式lb1->setStyleSheet("color:rgb(255,0,0);");//第二步:两个单行输入框QLineEdit *le1=new QLineEdit(this);QLineEdit *le2=new QLineEdit(this);//设置坐标,宽高le1->setGeometry(220,130,300,50);le2->setGeometry(220,220,300,50);//设置默认提示文字le1->setPlaceholderText("请输入用户名");le2->setPlaceholderText("请输入密码");//设置用户名,密码位数le1->setMaxLength(8);le2->setMaxLength(8);//设置密码隐藏le2->setEchoMode(QLineEdit::Password);//设置样式le1->setStyleSheet("border:2px solid#ff0000;");le2->setStyleSheet("border:2px solid#ff0000;");//设置字体le1->setFont(myfont);le2->setFont(myfont);//第三步:两个按钮QPushButton *bt1=new QPushButton("登录",this);QPushButton *bt2=new QPushButton("注册",this);bt1->setFont(myfont);bt2->setFont(myfont);//设置坐标,宽高bt1->setGeometry(200,300,100,50);bt2->setGeometry(450,300,100,50);//给主窗口设置边框图片this->setStyleSheet("QMainWindow{border-image: url(C:/Users/Administrator/Desktop/share/4.jpeg);}");
}