使用Qt绘制一个简约美观的界面 【使用QSS简单美化】(笔记)
文章目录
- 使用Qt绘制一个简约美观的界面-使用QSS简单美化
- 基本控件布局
- 界面的简单美化 QSS
- 添加图片
使用Qt绘制一个简约美观的界面-使用QSS简单美化
基本控件布局
以绘制登录界面为例,创建一个继承自Qwidget的设计师界面类
为了使得控件排放整齐有序,可以使用layout布局进行辅助
首先,添加控件,然后按照类似css的页面布局方式,在控件下方添加一Vertical Spacer垫片,用于控制该控件与其他控件的下边距(如果不希望边距改变,可以将V Spacer的sizeType设置为Fixed)
将 控件 和 控件下方的V Spacer 一起加入一个Vertical Layout垂直布局中
在该布局的左右两端加入两个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简单美化】(笔记)相关推荐
- 如何快速搭建一个简约美观的在线互动教室?
大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员 这两年,随着疫情的出现,很多人的生活习惯都被逐渐改变了.例如在十年前,很多人说起上课.说起开会,一定是要面对面才能完成的事情,但是如今 ...
- 9.如何使用QT绘制导航箭头的图标
利用QT绘制一个地图导航软件中的导航图标,代码如下 #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QLa ...
- JavaWeb页面创作(一)——一个好看的登录界面
一个好看的登录界面 代码非常简单,更改主体背景在body里更改属性,其余的文字在对应位置修改即可.页面效果展示如下: jsp界面代码附上: <%@ page language="jav ...
- QT实现在图表顶部绘制一个附加元素(标注)
QT实现在图表顶部绘制一个附加元素 项目简介 项目技术 项目展示 主要源码片段解析 获取完整项目源码传送门 项目简介 在图表顶部绘制一个附加元素(标注). 项目技术 qt5.12,qtchart模块, ...
- Qt 局域网聊天(功能完善,界面美观,免费下载)
Qt 局域网聊天(功能完善,界面美观,免费下载) 高清截图 登陆界面 聊天界面 GIF 登陆界面 发送消息 发送图片 设置头像 历史消息 查看名称 房间人数 调整大小 窗体全屏 截屏(最新的Ubunt ...
- 用Qt写一个简单的音乐播放器(三):增加界面(播放跳转与音量控制)
一.前言 在用Qt写一个简单的音乐播放器(一):使用QMediaPlayer播放音乐中,我们已经知道如何去使用QMediaPlayer播放音乐. 在用Qt写一个简单的音乐播放器(二):增加界面(开始和 ...
- QT使用openGL绘制一个三角形
对于opengl的学习来说,绘制一个三角形是学习一种计算机语言时的一个hello world级的入门程序,个人觉得相比主流语言的helloworld,openGL的入门确实是有一些劝退,虽然说有不错的 ...
- 【QT】使用QML构建一个简易的计算器界面(一)
使用qml来构建一个界面是非常便捷的,熟悉其中组件的使用,构建一个界面就不是难事. 首先来看如何快速的创建一个计算器的基础界面: 先新建一个qt quick项目,运行可以得到一个空白的窗口,根据自己设 ...
- Qt OpenGL(二十八)——Qt OpenGL 核心模式-绘制一个正方体(正六面体)
Qt OpenGL(二十七)--Qt OpenGL 核心模式-绘制一个正方体(正六面体) 截止到上一篇文章,一川想使用Qt封装的类绘制一个旋转的彩色三角形的目标就实现了. 上一篇在介绍了使用变换矩阵的 ...
最新文章
- koa源码分析-co模块以及thunk
- nodejs获取ASP.Net WebAPI(IIS Windows验证)
- jq 控制td只显示一行_桥式八角翼闸DAIC-TD-YZ
- POSIX 线程编程(二)线程建立与终止
- 数据结构与算法-- 八皇后问题(多种实现方案)
- php 数组区删除重复的,php – 从数组中删除重复的项目
- 以30字符宽居中输出python字符串_Python3 字符串
- 【CCF】201909-2小明分苹果
- restTemplate设置访问超时
- Python json.dumps() 自动缩进
- 春节假期,我把父母家的网络整瘫了……
- [Java]一个WiFi管理器(获取WiFi连接的网关的ip和信息)和热点管理器(获取连接本机的热点的设备的ip、MAC和信息)
- ARM开发工具综述转
- Golang之Shadowed Variables(幽灵变量)
- jmeter性能测试从零基础到精通
- 第十一天:制定进度计划、错题整理、进度压缩、资源平衡和资源平滑、关键路径和关键链对比
- 【国内博客】国内常见的 博客 主页 (IT)
- 游戏开发论坛_游戏开发制作全流程介绍
- \(^_^)/ MySQL语句
- 【人脸识别】FaceNet(二)