使用Qt QSS绘制简单美化界面功能

目录
  • 使用Qt绘制一个简约美观的界面-使用QSS简单美化
    • 基本控件布局
    • 界面的简单美化 QSS
  • 添加图片
    • 方法1：添加资源
    • 方法2：直接指定图片在计算机中的绝对 / 相对路径

使用Qt绘制一个简约美观的界面-使用QSS简单美化

基本控件布局

以绘制登录界面为例，创建一个继承自Qwidget的设计师界面类

为了使得控件排放整齐有序，可以使用layout布局进行辅助

  1. 首先，添加控件，然后按照类似css的页面布局方式，在控件下方添加一Vertical Spacer垫片，用于控制该控件与其他控件的下边距（如果不希望边距改变，可以将V Spacer的sizeType设置为Fixed）
  2. 将 控件 和 控件下方的V Spacer 一起加入一个Vertical Layout垂直布局中
  3. 在该布局的左右两端加入两个Horizontal Spacer垫片，用于设置该布局与其上一级布局 或 Widget / Frame 等窗体的左右边距

效果如下：

（注意：直接将控件放入布局中往往会导致其被拉长变形

如果要固定控件的尺寸，可以直接设置控件的最小尺寸 setMinimumSize(500,50)，然后设置控件的尺寸策略 setSizePolicy(QSizePolicy::Fixed,QSizePolicy::Fixed) 为长宽固定【可以直接在设计师界面的右边栏设置】

或是直接设置固定尺寸 setFixedSize(500,50) ）

使用spacer + layout的方式虽然有些麻烦，但可以无需去仔细调节各控件的坐标，就可以简单实现控件的居中，并且也方便调节控件之间的相对距离等等

最后添加完所有组件的布局后效果如下：

理论上以上的效果也可以使用类似css的方式，调节控件的padding和margin等值来实现

界面的简单美化 QSS

现在界面布局虽然画好了，但是默认的灰色底色，方形边框，9号Arial字体都太win98风格了 : -(

可以在 该界面类的构造函数 中调用ui中的控件对其进行设置

（虽然在类的作用域和在设计师界面中都可以对控件的StyleSheet进行设置，但是为了避免冲突，尽量在类中统一设置）

输入框/标签中文本的居中等:

可直接在设计师界面中的右边栏设置

输入框中设置提示文字：

lineEdit_pwd->setEchoMode(QLineEdit::Password);//密文输入

密码栏中设置密文输入：

lineEdit_pwd->setEchoMode(QLineEdit::Password);//密文输入

颜色 / 边框 / 字体 设置：

lineEdit_pwd->setStyleSheet("font: 25 14pt '微软雅黑 Light';" //字体
                                "color: rgb(31,31,31);"		//字体颜色
                            	"padding-left:20px;"       //内边距-字体缩进
                                "background-color: rgb(255, 255, 255);" //背景颜色
                                "border:2px solid rgb(20,196,188);border-radius:15px;");//边框粗细-颜色-圆角设置

渐变色设置：

this->setStyleSheet("background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:1, y2:0, stop:0 rgba(251,102,102, 200), stop:1 rgba(20,196,188, 210));");

对hover / pressed等动作效果进行设置:

login_button->setStyleSheet("QPushButton{font: 25 14pt '微软雅黑 Light';color: rgb(255,255,255);background-color: rgb(20,196,188);"
                                "border: none;border-radius:15px;}"
                                "QPushButton:hover{background-color: rgb(22,218,208);}"//hover
                                "QPushButton:pressed{background-color: rgb(17,171,164);}");//pressed

主题色的选择：个人感受来说，一般主页面以白色或黑色作为底色，再选取一种颜色作为主题色/装饰色即可，可使得画面不会过于杂乱，主题色的选择以HSV色彩模型为例，不要直接使用windows自带色盘中的默认颜色，色彩的饱和度不要过高，同时，当色彩明度较高时，可以适当提高饱和度，当色彩明度较低时，可以适当降低饱和度，使得颜色总体看起来不会过浓

最终呈现效果如下：

并且拖动窗体长宽，内部的登陆视窗大小是不变的

添加图片

方法1：添加资源

  • 首先，ctrl+N新建一个QT Resource File
  • 设定资源路径的名称

  • 在资源界面中，点击添加前缀，最好对前缀进行修改（注意，此处的前缀是你之后调用图片时，需要手动输入的url名称 ）

4.在该界面下，继续点击添加文件（不添加无法加载图片）

5.手动在所需位置添加

ui->label_logo->setStyleSheet("image: url(:/image/profile.png);");
this->setStyleSheet("background: url(:/image/profile.png);");//窗口背景设置
//或setStyleSheet("background-image: url(:/image/profile.png);")

（以image形式设置图片会以缩放的形式完整展示，以background形式设置图片会多张重复平铺背景）

方法2：直接指定图片在计算机中的绝对 / 相对路径

label_logo->setStyleSheet("image: url(./pic/profile.png);");

注意设置Qlabel的alignment水平属性为AlignHCente使图片居中显示

最终效果如下：

到此这篇关于使用Qt QSS绘制简单美化界面的文章就介绍到这了,更多相关Qt QSS界面美化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Python QTimer实现多线程及QSS应用过程解析

    多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进度条来显示处理的进度. 程序的运行速度可能加快. 在一些等待的任务实现上如用户输入.文件读写和网络收发数据等,线程就比较有用了.在这种情况下我们可以释放一些珍贵的资源如内存占用等等. 每个独立的线程有一个程序运行的入口.顺序执行序列和程序的出口.但是线程不能够独立执行,必须依存在应用程序中,由应用程序提

  • 如何利用PyQt5美化你的GUI界面

    如何利用PyQt5美化你的GUI界面

    目录 1 圆点选择选项设置 2 选项按钮设置 3 关闭弹窗设置 4 关闭程序弹窗 5 设置关闭按钮 6 设置背景 7 下拉列表框设置 8 等待时显示进度条 总结 1 圆点选择选项设置 效果展示 代码参考 #!/usr/bin/python # -*- coding:utf-8 -*- import sys from PyQt5 import QtWidgets, QtCore from PyQt5.QtWidgets import * class qt_view(QWidget): def __

  • Python GUI库PyQt5图形和特效样式QSS介绍

    Python GUI库PyQt5图形和特效样式QSS介绍

    QSS介绍前言 QSS即Qt样式表,是用来自定义控件外观的一种机制,QSS大量参考了Css的内容,但QSS的功能要比Css弱得多,体现在选择器少,可以使用的QSS属性也少,而且并不是所有的属性都可以应用在PyQt的控件上,QSS使页面美化跟代码层分开,利于维护 QSS的语法规则 QSS的语法规则几乎与CSS相同,QSS样式由两部分组成,其中一部分是选择器(Selector),指定哪些软件会受到影响,另一部分是声明(Declaration),指定哪些属性应该在控件上进行设置,声明部分是一系列的"属

  • PyQt5设置登录界面及界面美化的实现

    PyQt5设置登录界面及界面美化的实现

    写在前面 前一段时间博主刷了半个多月的LeetCode算法题,刷的归类为简单的那些题,做到自己简直要怀疑人生.想着人生在世,何苦这么为难自己呢,何不做点自己擅长的东西.想到博主还有个项目没做完呢,于是开始捣鼓起来.项目的最终成果是要写一个软件,把所有研究的内容可视化的展示出来,研究的内容都写的差不多了,还差个登录界面,于是就开始元气满满的干起来. 先上编译环境: Python3.7 pycharm2020专业版 PyQt5 博主习惯用Spyder做编译器,但如果做大项目,最好还是用pycharm

  • Python GUI库PyQt5样式QSS子控件介绍

    Python GUI库PyQt5样式QSS子控件介绍

    QSS子控件 QSS子控件实际上也是一种选择器,其应用在一些复合控件上,典型的如QComboBox,该控件的外观是,有一个矩形的外边框,右边有一个下拉箭头,点击之后会弹出下拉列表,例如: QComboBox:drop-down {image:url(dropdown.png)} 上面的样式指定所有的QComboBox下拉箭头的图片是自定义的,图片文件为dropdown.png ::drop-down子控件选择器可以与上面提到到的选择器一起联合使用,例如 QComboBox#myQComboBox

  • python GUI库图形界面开发之PyQt5动态加载QSS样式文件

    python GUI库图形界面开发之PyQt5动态加载QSS样式文件

    在Qt中经常需要使用样式,为了降低耦合性(与逻辑代码分离),我们通常会定义一个QSS文件,然后编写各种控件(QLabel,QLIneEdit,QPushButton等)的样式,最后使用QApplication或QMainWindow来加载样式,这样就可以让整个应用程序共享一种样式了 编写QSS 首先新建一个扩展名为.qss的文件,如style.qss,然后将其加入资源文件(.qrc)中,在style.qss文件中编写样式代码,例如 QMainWindow{ border-image:url(./

  • 使用Qt QSS绘制简单美化界面功能

    使用Qt QSS绘制简单美化界面功能

    目录 使用Qt绘制一个简约美观的界面-使用QSS简单美化 基本控件布局 界面的简单美化 QSS 添加图片 方法1:添加资源 方法2:直接指定图片在计算机中的绝对 / 相对路径 使用Qt绘制一个简约美观的界面-使用QSS简单美化 基本控件布局 以绘制登录界面为例,创建一个继承自Qwidget的设计师界面类 为了使得控件排放整齐有序,可以使用layout布局进行辅助 首先,添加控件,然后按照类似css的页面布局方式,在控件下方添加一Vertical Spacer垫片,用于控制该控件与其他控件的下边距

  • 纯swift实现ipad版简单美团界面功能

    纯swift实现ipad版简单美团界面功能

    本文实例为大家分享了swift实现ipad版美团界面功能的具体代码,供大家参考,具体内容如下 一 总体功能图一 : (ipad竖屏) 二 总体功能图二 : (ipad横屏) 三 讲解内容 1 搭建美团界面(掌握) 2 ios8.0之后的Popover的运用(重点) 3 协议(掌握) 4 通知(掌握) 5 细节处理 四总体界面 1 由总体的app界面效果,能看出来,一个UIViewController控制器作为UINavigationController的根控制器就能满足条件. 五 导航条设置 1

  • Qt绘制简单时钟

    本文实例为大家分享了Qt绘制简单时钟的具体代码,供大家参考,具体内容如下 概述 (1)基本原理 利用简单的几何图形绘出表盘和指针,然后基于系统时间调整指针偏转角度达到模拟时钟的效果. 其中可以加上自己喜欢的背景资源,设计不同风格的时钟. (2)部分函数说明 ①调色和填充 painter.setBrush(Qt::red); //设置画刷,填充颜色(红色) painter.setPen(Qt::red); //设置画笔,外围轮廓颜色(红色) ②抗锯齿(减少图形外围锯齿状,使线条平滑) painte

  • Qt timerEvent实现简单秒表功能

    本文实例为大家分享了Qt timerEvent实现简单秒表的具体代码,供大家参考,具体内容如下 #ifndef WIDGET_H #define WIDGET_H //头文件 #include<QWidget> #include<QObject> #include<QTimerEvent> #include<QTimer>   namespace Ui { class Widget; }   class Widget : public QWidget {  

  • Qt编写地图之实现跨平台功能

    Qt编写地图之实现跨平台功能

    目录 一.前言 二.功能特点 1 省市区域地图封装类功能特点 2 百度地图封装类功能特点 3 离线地图下载类功能特点 4 省市轮廓下载类功能特点 三.体验地址 四.效果图 五.相关代码 一.前言 跨平台着实花了不少的精力,为了从Qt4.7兼容到Qt6.2及后续版本,头发掉了不少,仅有的几根毛所剩无几,哎,可能这就是程序员的命,本人写Qt程序这么多年,比较喜欢支持多个Qt版本,尤其是钟情于支持任意Qt版本+任意系统+任意编译器,这句话说起来简单其实实现起来就不容易了,首先你得有个很多版本的测试环境

  • Qt Designer的简单使用方法

    Qt Designer的简单使用方法

    在前面两节的例子中,主界面窗口的尺寸和标签控件显示的矩形区域等,都是用 C++ 代码编写的.窗口和控件的尺寸都是预估的,控件如果多起来,那就不好估计每个控件合适的位置和大小了. 用 C++ 代码编写图形界面的问题就是不直观,因此 Qt 项目开发了专门的可视化图形界面编辑器--Qt Designer(Qt 设计师).通过 Qt Designer 就可以很方便地创建图形界面文件 *.ui ,然后将 ui 文件应用到源代码里面,做到"所见即所得",大大方便了图形界面的设计. 本节就演示一下

  • 详解C/C++ QT QChart 绘制组件应用

    详解C/C++ QT QChart 绘制组件应用

    QtCharts 组件是QT中提供图表绘制的模块,该模块可以方便的绘制常规图形,Qtcharts 组件基于GraphicsView模式实现,其核心是QChartView和QChart的二次封装版. 在使用绘图模块时需要在pro文件中包含QT += charts来引入绘图类库. 然后还需在头文件中定义QT_CHARTS_USE_NAMESPACE宏,这样才可以正常的使用绘图功能. 一般情况下我们会在mainwindows.h头文件中增加如下代码段. #include <QMainWindow>

  • Android实现简单的照相功能

    一个简单的照相功能,拍照之后在另一个activit中显示出拍照的图片.首先是布局文件: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto&

  • PHP实现的简单在线计算器功能示例

    PHP实现的简单在线计算器功能示例

    本文实例讲述了PHP实现的简单在线计算器功能.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf8"> <title>简单的计算器(www.jb51.net)</title> </head> <body> <?php //如果用户单击了计算按

  • Android编程实现canvas绘制柱状统计图功能【自动计算宽高及分度值、可左右滑动】

    Android编程实现canvas绘制柱状统计图功能【自动计算宽高及分度值、可左右滑动】

    本文实例讲述了Android编程实现canvas绘制柱状统计图功能.分享给大家供大家参考,具体如下: 这里实现了一个简单的柱状统计图,如下:   特点: 1.根据数据源自动计算每个条目的高度.宽度.间距,自动计算分度值. 2.当条目数较多时,可左右滑动查看全部内容,图形.文字同步滑动,并且松手后会渐渐的停下来(而不是立刻停下来). 代码: (1)核心代码:BarChartView.Java package com.sina.appbarchart; import android.app.Acti

随机推荐