首页 > 其他分享 >常用 QT 样式与方法(按钮悬浮变色,渐变色等)

常用 QT 样式与方法(按钮悬浮变色,渐变色等)

时间:2023-07-05 14:13:15浏览次数:37  
标签:控件 QT QSizePolicy int 渐变色 void background 按钮

1 QSS 按钮悬浮效果

类似于企业微信等,鼠标悬浮在某按钮上,按钮会改变背景色来达到告知用户 "选中" 的效果,如下图所示:

可以看到其实是 background 有一个浅灰色,同理,我们可以在 hover 的时候改变按钮的 background 如企业微信这样的作法,或者更改按钮文字颜色。

主要使用的 QT 函数,示例如下:

// 通过更改按钮的 QSS 属性可以很容易达到目的
// QPushButton:hover 按钮的悬浮属性
// color: 后面要加 # 号,是因为是十六进制(更改文字颜色,或使用 background 更改背景色)
// QColor(x).lighter(y) 是指将 x 颜色变浅 y 度,同理可以使用 QColor(x).darker(y) 是指把颜色变深 y 度
this->setStyleSheet(QString("QPushButton:hover {"
                        "color: #%1"
                        "}").arg(QString::number(QColor("#D70A2A").lighter(80).rgb(), 16));

2 QSS 控件渐变色

更改按钮的 QSS 属性可以很容易达到此目的

此处我们设置按钮的背景色为横向渐变,示例如下:

// (x1, y1, x2, y2)表示颜色渐变的方向
// x1 = 0,x2 = 1(沿水平方向渐变),y1 = 0,y2 = 0(垂直方向不变)
// stop 表示位置(0-1)
// 颜色可以用 RGB 或者 rgba,如 rgba(0, 0, 255, 0.5),颜色 (0, 0, 255)和透明度(0.2),透明度范围 0-1
this->setStyleSheet("QPushButton{"
                     "background: qlineargradient(x1:0, y1:0, x2:1, y2:0,stop:0 #497BF0,stop:1 #1FB6F6)"
                     "}");

效果图:

3 布局常用函数

// 设置边距(左上右下都为同一个值)
void setMargin(int);  
// 设置所有控件的间隔大小    
void setSpacing(int);    
// 单独设置左上右下的边距
void setContentsMargins(int left, int top, int right, int bottom);  
// 设置控件的对齐方式
bool setAlignment(QWidget *w, Qt::Alignment alignment);  
// 设置布局的对齐方式           
bool setAlignment(QLayout *l, Qt::Alignment alignment);             

// 添加间隔大小
void addSpacing(int size);      
// 添加控件大小比例(将空白没有 widget 的地方均分成 9 分,然后按照参数的大小分配弹簧)   
void addStretch(int stretch = 0);  

// 构造具有首选宽度 w、首选高度 h、水平大小策略 hPolicy 和垂直大小策略 vPolicy 的弹簧
QSpacerItem::QSpacerItem(int w, int h, QSizePolicy::Policy hPolicy = QSizePolicy::Minimum, QSizePolicy::Policy vPolicy = QSizePolicy::Minimum) 

// 添加弹簧
void addSpacerItem(QSpacerItem *spacerItem);         

// 添加普通控件
void addWidget(QWidget *, int stretch = 0, Qt::Alignment alignment = Qt::Alignment()); 
// 添加子布局
void addLayout(QLayout *layout, int stretch = 0);    

标签:控件,QT,QSizePolicy,int,渐变色,void,background,按钮
From: https://www.cnblogs.com/PikapBai/p/17411454.html

相关文章

  • el-tree树点击全选按钮,全部展开并且全选
    先看图:代码如下://全部选中qxClick(){this.isQx=!this.isQx;//判断按钮的状态this.expandAll();if(this.isQx){console.log(this.isQx,"-------------------------------",this.datas);//设置this.$r......
  • MQTTnet 创建基于 WebSocket 的 Mqtt 服务器
    MQTTnet.Exceptions.MqttProtocolViolationException:Expectedatleast21540bytesbutthereareonly71bytes使用了错误的协议,mqtt有tcp和ws两种连接协议ws://使用1883端口就能正常连接 ......
  • Qt qBreakPad使用(windows)
    一、介绍Googlebreakpad是一个跨平台的崩溃转储和分析框架和工具集合。而且BreakPad本来就是为了解决C、C++异常捕获而开发的。BreakPad支持跨平台,很容易在Qt项目中使用,使跨平台的应用实现跨平台异常捕获。这里介绍一下qBreakPad的使用。二、编译步骤1、下载qBreakPad源码......
  • Qt InputDialog 置顶后模拟键盘输入失效问题
    开发环境:Qt5.12.2+QtCreator4.8.21、问题背景嵌入式linux-arm触摸屏移植了谷歌拼音输入法后测试使用问题2、问题现象1)主窗口编辑框输入法有效2)QInputDialog弹框输入法失效3、问题原因 初步怀疑是QInputDialog置顶问题导致4、问题解决......
  • 前端Vue自定义精美悬浮菜单按钮fab button 可设置按钮背景颜色 菜单按钮展开条目
    前端Vue自定义精美悬浮菜单按钮fabbutton可设置按钮背景颜色菜单按钮展开条目,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13321效果图如下:cc-suspensionMenu使用方法<!--scrollShow:是否显示滑动到顶悬浮按钮 color:悬浮按钮背......
  • 前端Vue自定义精美宫格菜单按钮组件 可设置一行展示个数 可设置成九宫格 十二宫格 十
    前端Vue自定义精美宫格菜单按钮组件可设置一行展示个数可设置成九宫格十二宫格十五宫格,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13315效果图如下:cc-categoryMenu使用方法<viewclass="header">十五宫格菜单</view><!--推荐宫......
  • ubuntu下新安装的qtcreator无法打开?编译好的qt程序缺少qtcore库文件?
    ubuntu下新安装的qtcreator无法打开?编译好的qt程序缺少qtcore库文件?试试添加qt和qtcreator到环境变量。sudovi/etc/profile新增exportQTDIR=你的qt根目录exportPATH=$QTDIR/bin:$PATHexportLD_LIBRARY_PATH=$QTDIR/lib:$LD_LIBRARY_PATHexportQTCREATOR=你的qtcret......
  • Qt杂谈5.浅谈Qt程序乱码那些事
    1为啥聊这个?你是否也在为Qt程序乱码的问题发愁?网上查了一大堆文章,十篇文章九篇一样,虽然碰运气把问题解决了,但是下次遇到同样的问题还是无从下手,如果你想从根本上理解并解决这个问题,那么可以看看这篇文章,希望能帮到你。2从代码出发2.1使用的Qt版本本人的测试环境:Qt版本:Desk......
  • pyqt5-样式设置
    1、介绍pyqt5中,允许通过类似css的层叠样式表的形式,直接为组件声明显示样式,比如设置字体、字体颜色和背景色等。具体的是,是通过QWidget类中声明的setStyle或setStyleSheet方法设置。setStyle(self,a0:QStyle)setStyleSheet(self,styleSheet:str)style(self)->QStylesty......
  • 关于idea 右键找不到Diagrams 按钮
    问题:idea上找不到Diagrams按钮了解决问题:File>Setting>Plugins,搜索Diagrams ,Enabled,完成。 ......