每日一言
努力不是为了证明给谁看,而是为了遇见更好的自己。
好的我们现在雏形做好了,我们要开始做样式了,我们这边引进QT的stylesheet
我先说明,这个QT的库和帮助文档的内容实在是太多了,我们必须针对项目进行学习,所以我们都必须要记住现在我们所学的每一个语法

这个stylesheet就是Qt的样式表啦,其中这个三幅图就是说明了,如果我们不自定义样式,那么在不同的系统就会调用各自系统的资源,去渲染我们的样式,也就是在不同的系统上的样式是不一样的,那我们不想这样,那么我们必须要自己进行自定义样式
说完开干!
对了我们先解决一下这个

这个好解决

我们找到最大的这个窗体,他这边有个windowTitle这个就是这个窗体的设置名字的地方,这这个windowIcon就是图标,我们选择我们自己的图片

就是这样就可以实现了

我们找到这个,表示的是Qpushbutton的一些样式,比如hover就是鼠标进行悬浮在按钮的区域的时候,比如这边++++QPushButton++++:hover { color: white } 表示鼠标悬浮在这个按钮上方的时候字体颜色表示白色
++++QRadioButton++++:!hover { color: red } 表示鼠标 没有悬浮在这个按钮上方的时候字体颜色表示红色
++++QPushButton++++:hover:!pressed { color: blue; } 表示鼠标悬浮在上方的时候且没有按下按键时字体是蓝色
++++QPushButton++++:hover:pressed { color: red ; } 表示鼠标悬浮在上方的时候且按下按键时字体是红色
所以我们就可以进行开始设定啦

看我们在更改样式表这边我们进行将指令写进去
看吧这个就是我写的那三个指令的效果
当然这边我要讲一下,这个Qpushbutton的++++QRadioButton++++:!hover { color: red } 和我这边直接写 ++++QRadioButton++++:{ color: red } 实际的效果是一样的
好了但是我们的不是要这样的,我们要UI美化要变成这样的

就是我们红色框框里面的图片,那么怎么操作呢
首先我们要知道这个图片是资源文件,所以我们要这样操作

在项目中创建Qt Resource File文件,这个就是资源文件,我们的图片文件实际上就是资源文件,我们取名为res,所以得到以下这个图

好的我们需要贮备一些好看的图片
我们将准备好的图片,这边我推荐去aliyun矢量图那边去,很好很好看的图片都有,那么我们将这些图片存放到一个文件夹中,我叫做QTicon,随后我们可以将这个文件夹复制一份到我们的项目目录中
比如这样:
我们打开这个res.qrc文件的时候我们就需要进行上面的1和2
这个 Add Prefix(添加前缀)
- 含义 :前缀是一种用于组织资源文件的逻辑分组方式,在.qrc(Qt Resource Collection)资源文件中,前缀以斜杠(/)开头 ,它类似于文件系统中的目录,用于对资源进行分类管理,但又不是真正的目录。例如,你可以创建/images前缀专门存放图片资源,/sounds前缀用来存放音频资源。
- 作用 :
- 资源分类 :方便将不同类型或用途的资源分开管理,使资源结构更加清晰。比如在一个复杂的应用程序中,将界面图标、背景图片、提示音等资源分别放在不同前缀下,便于查找和维护。
- 避免命名冲突 :当项目中有大量资源且可能存在文件名重复的情况时,不同前缀下可以存在同名文件,因为它们的完整资源路径是不同的,通过前缀加文件名的组合能唯一标识一个资源。
- 便于代码引用 :在代码中引用资源时,需要指定完整的资源路径(包含前缀)。合理的前缀设置能让代码中的资源引用更直观和规范。例如,QPixmap pixmap(":/images/logo.png"); ,这里:/images就是前缀部分,logo.png是文件名。
Add File(添加文件)
- 含义 :将实际的资源文件(如图片文件、文本文件、音频文件等)添加到指定的前缀下,使其成为项目可使用的资源。这些文件会被 Qt 的资源系统管理,在编译时会被打包到可执行文件或库文件中,这样应用程序在运行时就可以直接访问这些资源,而不需要依赖外部的文件系统路径。
- 作用 :
- 整合资源 :把项目运行所需要的各种资源文件纳入到项目的资源管理体系中,确保在发布应用程序时,资源文件能一起被正确部署,不会因为资源文件的缺失导致应用程序运行异常。
- 方便访问 :添加到资源文件中的资源可以通过 Qt 提供的资源访问机制(如使用QResource类、资源路径等)进行访问,不需要关心资源文件在实际文件系统中的具体位置,提高了资源访问的灵活性和可移植性。例如,在 Qt 应用程序中加载样式表文件,可以使用QFile file(":/stylesheets/main.qss"); ,前提是已经通过Add File将main.qss添加到了对应的前缀(如/stylesheets)下。
得到现在这个效果,这些png都是我们需要的图片
- 好的那我们进行下一步

我们对进行选择添加资源,选择这个border-image,不要问就这样用,什么都问,只会害了你
选择QTicon的图片文件
选择完之后,我们会发现出现了三个border-image这样的命令随后我们进行组装起来,就像这样,我都不懂怎么解释了,之前学过前端的都看得懂,随后我们就会发现变成了这个样子
如果图片太小我们可以进行调整,用这个minimumSize可以调整最小高度和宽度
好了,现在我们就实现这个功能了,其他两个关闭和保存的也是这样做
好的现在我们又发现了一个bug
我们会发现,怎么右下角这两个无法进行布局的变化而变化,那怎么解决??
首先我们先加上这么一句话,这句话的意思就是,令ui的bac1_2将它进行布局管理也就是需要使用这个setLayout,与谁呢也就是相互的进行绑定,ui的horizontLayout_2,只有这样我们窗口进行拉动的时候才会进行变化,
这个是setLayout函数作用:
- 管理子部件布局 :setLayout函数可以将一个布局管理器(如QVBoxLayout垂直布局、QHBoxLayout水平布局、QGridLayout网格布局、QFormLayout表单布局等)应用到指定的窗口部件上。这样,添加到该窗口部件的子部件就会按照布局管理器定义的规则进行排列和显示。例如,使用QVBoxLayout时,子部件会在垂直方向上依次排列;使用QGridLayout时,子部件会被放置在指定的网格单元格中。
- 响应窗口大小变化 :当窗口大小发生改变时,布局管理器会自动调整子部件的大小和位置,以适应新的窗口尺寸,从而保证界面的美观和可用性。通过setLayout设置布局后,子部件能根据布局管理器的策略合理地改变自身大小和位置,避免出现部件重叠、显示不全等问题。
那么我们开始实践



我们会发现还是没有用,怎么变成这样了
解决方案:

我们给将原图的布局拉过来,和我们运行的效果一致的效果
随后我们进行加入左弹簧

我们运行后会发现,右边的间隔太小了,那么我也可以使用弹簧进行顶出来

但是我们这个右弹簧的type要设置成Fixed类型的,固定值

运行后我们就会发现很完美了