当前位置: 首页 > article >正文

【qt】qss使用

1.按钮设置颜色

在这里插入图片描述

  ui->pushButton->setStyleSheet("QPushButton { color : red;}");

也可以通过rgb来设置
在这里插入图片描述
ff表示红色拉满,gb为0当然是红色
这只是针对pushbutton对象的控件设置的,如果我想设置所有的按钮空间都是一个颜色
在这里插入图片描述
这是通过设置界面中子控件然后经过选择器选择QPushButton这个控件来设置的

2.全局样式

在这里插入图片描述
直接在main.cpp中设置所有的QPushButton的颜色
在这里插入图片描述

提出两个问题
1.如果设置了全局样式,然后再某个控件里面设置了其他样式,会怎么样?
比方说我们可以针对一个按钮设置的字体的像素(全局样式设置了颜色)
在这里插入图片描述
会形成叠加。
2.如果全局样式,然后在某个控件里面设置了同样样式,比方颜色
在这里插入图片描述
发现如果全局样式和某个控件样式冲突,会选择直接局部的控件样式选择

3.选择器的用法

1.类型选择器,上面讲过的就是类型选择器,演示一下
在这里插入图片描述
对于类型控件的子控件也生效
2.类选择器,他不会选择子类,如果是QWidget,在窗口中的子类控件不会设置
在这里插入图片描述
按钮属于子控件
3.id选择器,在开发中,期望不同的控件样式不同,此时就需要使用id选择器了
在这里插入图片描述
类型选择#+控件id+设置信息,如果类型选择器和id选择器设置类型冲突,则选择就近的及id选择器设置内容
4.并集选择器
将不同的控件设置系统属性,比方说把按钮,标签,文本框颜色设置一样
在这里插入图片描述

#include "widget.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
   // a.setStyleSheet("QPushButton {color :red;}");//类型选择器
  //  a.setStyleSheet(".QWidget {color :red;}"); //类选择器,子类不会设置

    //  QString str="QPushButton {color :red;}";

     // str+="#pushButton_2 {color :black;}";//id选择器
     QString str="QPushButton,QLineEdit,QLabel {color :pink;}";//并集选择器
    a.setStyleSheet(str);

    Widget w;
    w.show();
    return a.exec();
}

5.子控件选择器
使用下拉框QComboBox的子控件选择器给下拉按钮设置图片
首先创建一个下拉框
在这里插入图片描述
导入替换子控件的图片
在这里插入图片描述
在这里插入图片描述
对比效果:
在这里插入图片描述
6.伪类选择器
前面介绍的选择器,都是选中"控件"伪类选择器,选中的是控件的"状态""符合一定状态条件"的控件
使用伪类选择器对一个控件的不同状态进行设置,比方一个按钮鼠标没点击是红色,鼠标移动到该按钮内部变为粉色,按下变蓝色

伪类选择器说明
:hover鼠标放到控件上
:pressed鼠标左键按下
:focus获取输入焦点时
:enabled元素处于可用状态时
:checked被勾选时
:read-only元素为只读状态时

在这里插入图片描述

4. 盒子模型

请添加图片描述
1.设置内边框:表示文字和边框的距离,用标签举例子
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
2.设置外边框
在这里插入图片描述

5.登录界面设计

1.使用控件

在这里插入图片描述

2.垂直布局

在这里插入图片描述

3.调整大小

在这里插入图片描述
将minimumsize和maxmumsize的高度都设置为50,在高度方向将按钮,两个lineedit拉伸一下

4.导入背景图片

在这里插入图片描述
在这里插入图片描述
导入成功

5.添加QFrame

因为qt直接给QWidget顶层窗口设置背景图会失效,所以我们套一个控件QFrame,也是QWidget的一个子类
在这里插入图片描述
在这里插入图片描述
将登录界面放在QFrame里面
在这里插入图片描述
调节QFrame控件大小和界面一样大

6.添加样式表

在这里插入图片描述
这里注意设置背景图时不要使用background-image,这样设置图片不会跟随控件大小变化,我们可以设置为border-image
在这里插入图片描述
设置行编辑样式表
在这里插入图片描述
在这里插入图片描述
设置复选框样式
在这里插入图片描述

在这里插入图片描述
设置按键样式表
在这里插入图片描述
在这里插入图片描述
添加按钮状态样式,(按下)
在这里插入图片描述

7.添加行编辑提示

在这里插入图片描述
在这里插入图片描述
同理
在这里插入图片描述
调节输入的密码私密
在这里插入图片描述

8.演示

登录界面设计


http://www.kler.cn/a/288971.html

相关文章:

  • Javascript高级—常见算法
  • linux上海康SDK安装并设置环境变量
  • SpringBoot(十八)SpringBoot集成Minio
  • 算法学习第一弹——C++基础
  • git配置远程仓库的认证信息
  • Windows C++ TCP/IP 两台电脑上互相传输字符串数据
  • 钢铁百科:A633GrE钢板材质、A633GrE力学性能、A633GrE执行标准
  • JAVA - 关于防重复提交探讨
  • uniapp scroll-view滚动触底加载 height高度自适应
  • centos7 安装python3.12.5
  • 【链表】环形链表
  • Linux-centos7目录结构
  • C++入门基础知识45——【关于C++ 函数】定义函数、函数声明
  • 【网络安全】服务基础第一阶段——第六节:Windows系统管理基础---- DNS部署与安全
  • 【WPF动画】
  • kubeadm部署 Kubernetes(k8s) 高可用集群【V1.20 】
  • 智能创作与优化新时代:【ChatGPT-4o】在【数学建模】、【AI绘画】、【海报设计】与【论文优化】中的创新应用
  • 深度学习100问13:什么是二分类问题
  • 项目实战 ---- 商用落地视频搜索系统(5)---service层核心
  • Python进阶08-爬虫
  • 前端 数值列 禁止输入多个小数点
  • 按图搜索与精准营销:深度剖析拍立淘API用户画像构建
  • AlphaGo围棋模型——基于python语言
  • 交叉编译 gdb
  • HarmonyOS开发实战( Beta5版)优化实践/合理使用缓存提升性能
  • Linux 命令行快捷键