iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Qt自定义Widget实现互斥效果详解
  • 463
分享到

Qt自定义Widget实现互斥效果详解

2024-04-02 19:04:59 463人浏览 泡泡鱼
摘要

目录前沿功能实现知识点问题讲解知识点1讲解知识点2讲解知识点3总结前沿 什么叫做自定义Widget实现互斥效果呢? 在使用Qt做一个界面美观性比较强的功能时,可能会遇到这种问题:多个

前沿

什么叫做自定义Widget实现互斥效果呢?

在使用Qt做一个界面美观性比较强的功能时,可能会遇到这种问题:多个控件互斥,类似于QRadiButton控件,但又不是单纯的QRadioButton控件,互斥的可能是一个窗口,也可能是几个按钮,等等多种情况。

这里我只是列举了一个简单的互斥例子,虽然简单,但是包含了各种坑,有需要的掘友们可以小笔记们记一下,尤其是对Qt新手来说,还是很有必要的。

由效果图可以看出创建了3个自定义widget,点击其中一个时,另外两个背景色以及文本颜色变化,处于选中状态。

接下来,针对效果图展示的功能进行逐一讲解,包含了知识点以及踩坑记录。

功能实现

实现自定义互斥widget过程中遇到了如下知识点以及问题,看看有没有你曾经遇到的或者是刚好需要的功能吧!

知识点

1:Widget模拟按钮的四态功能,包括了:常态、按下、聚焦、禁用

2:Widget自定义类的背景色设置以及文本内容风格设置

3:如何让多个widget实现互斥效果

问题

1:自定义Widget背景色设置之后为什么不生效?

针对上述知识点以及问题来讲述这个简单的功能吧!

讲解知识点1

使用Widget模拟按钮的四态功能,需要用到Widget自身的消息:鼠标按下,鼠标进入、鼠标离开。

virtual void mousePressEvent(QMouseEvent *event); //鼠标按下响应消息
virtual void enterEvent(QEvent *event); //鼠标进入响应消息
virtual void leaveEvent(QEvent *event); //鼠标离开响应消息

有没有人会问道,为什么没有mouseMoveEvent消息?

解答:在Qt中直接使用mouseMoveEvent消息鼠标是无法触发的,必须要设置setMouseTracking(true)让鼠标跟踪事件在当前窗口处于有效状态。

根据使用的具体情况是否需要设置这个功能。当前的小demo中,只是做图片的转换,没有必要在mouseMove中一直消耗资源。

(题外话:在MFC框架下的鼠标mosemove事件是直接可用的不需要进行特殊设置)

鼠标进入到widget之后,就可以标记为鼠标一直在该widget中活动,除非触发了leaveEvent消息。

鼠标按下响应消息

void QCustomWidget::mousePressEvent(QMouseEvent *event)
{
	this->SetWidgetStyle(Style_Down);
	QWidget::mousePressEvent(event);
}

当前采用的枚举类型:鼠标按下响应。

鼠标进入widget响应消息

void QCustomWidget::enterEvent(QEvent *event)
{
	this->SetWidgetStyle(Style_Focus);
	QWidget::enterEvent(event);
}

当前采用的枚举类型:鼠标聚焦状态,使用进入消息代替了mousemove消息。

如果大家打日志会发现,该触发函数只会在鼠标进入的时候走一次,当鼠标持续在widget内部移动时是不触发的,极大的减少了消息处理。

鼠标离开widget响应消息

void QCustomWidget::leaveEvent(QEvent *event)
{
	this->SetWidgetStyle(Style_NORMal);
	QWidget::leaveEvent(event);
}

当前采用的枚举类型:鼠标离开状态。

我只是展示了最简单的离开设置,有一点需要考虑,当前widget如果处于按下状态,此刻鼠标离开了,该如何展示呢?

难道还要显示常态风格吗?

答案肯定是NO!

虽然鼠标已经移开,但是选中状态已经由常态变成了按下状态。在程序中我们需要用一个bool值变量来记录当前widget是否已经被选中过,如果选中过,当鼠标离开时就需要更改为选中状态

修改如下所示:

if (m_bClickedState == true)
{
	this->SetWidgetStyle(Style_Down);
}
else
	this->SetWidgetStyle(Style_Normal);

讲解知识点2

在程序中对于模拟的状态采用了枚举的类型进行表示。

类型说明
Style_Normal鼠标未做任何操作的初始状态
Style_Down鼠标在wiget中进行了按下操作
Style_Focus鼠标在widget中进行移动时操作状态
Style_Disable当前widget处于进行状态

每一个widget中都展示了相同的内容:编号,文本

因为只是做了展示功能,所以全部使用了QLabel控件

QLabel *m_labNumber; //编号类指针

QLabel *m_LabContent; //内容类指针

对应的实际处理

void QCustomWidget::SetWidgetStyle(ENUM_WidgetStyle enumStyle)
{
	//TODO:设置widget风格
	QString qsStyle = "", gStyleNumberNormal = "", gStyleContentNormal = "";
	switch (enumStyle)
	{
	case Style_Normal: //常态显示
	{
		//设置:背景
		qsStyle = "QWidget{background-color:#FFD700}";
		//设置:编号风格
		gStyleNumberNormal = "QLabel{color:#666666; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}";
		//设置:内容风格
		gStyleContentNormal = "QLabel{color:#666666; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}";
	}
		break;
	case Style_Down: //按下
	{
		//设置:背景
		qsStyle = "QWidget{background-color:#FFB6C1}";
		//设置:编号风格
		gStyleNumberNormal = "QLabel{color:#0000FF; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}";
		//设置:内容风格
		gStyleContentNormal = "QLabel{color:#00FFFF; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}";
	}
		break;
	case Style_Focus: //聚焦
	{
		//设置:背景
		qsStyle = "QWidget{background-color:#FFF0F5}";
		//设置:编号风格
		gStyleNumberNormal = "QLabel{color:#98FB98; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}";
		//设置:内容风格
		gStyleContentNormal = "QLabel{color:#98FB98; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}";
	}
		break;
	case Style_Disable: //禁用
	{
		//设置:背景
		qsStyle = "QWidget{background-color:#DCDCDC}";
		//设置:编号风格
		gStyleNumberNormal = "QLabel{color:#696969; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}";
		//设置:内容风格
		gStyleContentNormal = "QLabel{color:#696969; font-family:Microsoft YaHei UI; font-size:14px;} QLabel{background-color: transparent}";
	}
		break;
	default:
		break;
	}
	this->setStyleSheet(qsStyle);
	m_labNumber->setStyleSheet(gStyleNumberNormal);
	m_labContent->setStyleSheet(gStyleContentNormal);
}

根据不同的类型对应的背景风格也不同。大家可以将代码带入,运行查看下效果,是不是跟我展示的效果一致呢?

哈哈!如果你尝试了,就会发现是这个样子的效果:

为什么只能显示文字,我的背景呢?去了哪里?我不是已经设置了吗?

很多Qt新手在这里都会遇到这样的问题,于是开启了各种搜索模式,尝试各种方法,有的时候改着改着就对了,也就忽略了这个问题。

当我们创建一个自定义widget时,通用的方法使用new实例的方式,在new的过程中,为了层级关系好打理已经父子关系明确,都会传入this作为新创建窗口的父指针。

一旦我们传入了this指针之后,并未在自定义Widget中做任何处理时,此时就会出现这样的情况。

子类继承了父窗口的风格样式。

一般遇到这种情况时,会有两种处理方式:重写当前窗口的paintEvent函数,设置不沿用父窗口风格

为了方便起见,当窗口绘制的背景图不复杂的情况下都会采用第二种方式设置:

this->setAttribute(Qt::WA_StyledBackground);

在当前自定义widget类构造函数中设置上述代码后,之前出现的设置了背景风格却看不见的问题就迎刃而解了。

讲解知识点3

如何实现多个widget之间的互斥呢?

使用过QRadioButton控件的掘友们都知道,该控件想要设置互斥只需要简单的设置函数就可以了。

对于我们自定义的widget来说,是不存在这种函数的,互斥效果只能是手动用代码设置并根据选中与非选中状态来更换对应的展示效果。

假设,当前选中了“内容1”的自定义Widget,此时需要在Widget中鼠标按下响应中触发一个消息,通知外界,当前自定义Widget做了按下操作,需要做特殊的处理

void QCustomWidget::mousePressEvent(QMouseEvent *event)
{
	this->SetWidgetStyle(Style_Down);
	emit Msg_SendClicked();
	QWidget::mousePressEvent(event);
}

在调用自定义Widget的父类中响应对应的槽函数做特殊处理。

总结

到这里实现自定义Widget互斥效果就简单实现了。

对于互斥操作的实现很简单,最最需要掌握的就是如何设置widget的背景。

很多情况下子窗口与父窗口嵌套层级过多时,这种问题最容易出现了,因为我们在每次创建一个新widget对象时,最好的方式每次都不沿用父窗口的样式。

到此这篇关于Qt自定义Widget实现互斥效果详解的文章就介绍到这了,更多相关Qt Widget实现互斥内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Qt自定义Widget实现互斥效果详解

本文链接: https://www.lsjlt.com/news/163498.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Qt自定义Widget实现互斥效果详解
    目录前沿功能实现知识点问题讲解知识点1讲解知识点2讲解知识点3总结前沿 什么叫做自定义Widget实现互斥效果呢? 在使用Qt做一个界面美观性比较强的功能时,可能会遇到这种问题:多个...
    99+
    2024-04-02
  • Qt自定义Widget是怎么实现互斥效果
    这期内容当中小编将会给大家带来有关Qt自定义Widget是怎么实现互斥效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。前沿什么叫做自定义Widget实现互斥效果呢?在使用Qt做一个界面美观性比较强的功能...
    99+
    2023-06-28
  • 详解QListWidget如何实现自定义Item效果
    首先,我们来看以下实现的最终效果吧! 我觉得这并不是一个很难得问题,最近新招了一个应届生,发现在实现上述效果时,被困扰住了,是不是刚刚接触Qt的这种稍微有难度的界面时,都会有些无头...
    99+
    2024-04-02
  • Android自定义View实现动画效果详解
    目录帧动画补间动画属性动画帧动画 帧动画就是给定一个完整动画的所有关键帧,由大脑想象中间的变化过程的一种动画。 <xml version="1.0" encoding="utf...
    99+
    2023-02-02
    Android自定义View实现动画 Android 动画 Android自定义View
  • Qt利用QState状态机实现控件互斥操作详解
    目录功能讲解设置步骤1:设置btn1对应的状态信息2:设置btn2对应的状态信息3:设置btn3对应的状态信息4:设置停止状态5:数据绑定6:将所有的状态添加到状态机QStateMa...
    99+
    2022-12-08
    Qt QState状态机实现控件互斥操作 Qt 控件互斥操作 Qt QState状态机
  • vue+elementUI实现点击按钮互斥效果
    本文实例为大家分享了vue+elementUI实现点击按钮互斥的具体代码,供大家参考,具体内容如下 先看看实现的效果吧! 步骤: 一.html代码 <!-- 等级筛选 --&...
    99+
    2024-04-02
  • Android通过自定义view实现刮刮乐效果详解
    目录前言实现原理关键步骤创建bitmap绘制文字画路径完整代码前言 已经有两个月没有更新博客了,其实这篇文章我早在两个月前就写好了,一直保存在草稿箱里没有发布出来。原因是有一些原理性...
    99+
    2024-04-02
  • iOSUISegmentControl实现自定义分栏效果
    本文实例为大家分享了iOS UISegmentControl实现自定义分栏效果的具体代码,供大家参考,具体内容如下 iOS 自带的UISegmentControl实现的就是类似上图...
    99+
    2024-04-02
  • Android自定义view实现滑动解锁效果
    本文实例为大家分享了Android自定义view实现滑动解锁的具体代码,供大家参考,具体内容如下 1. 需求如下: 近期需要做一个类似屏幕滑动解锁的功能,右划开始,左划暂停。 2. ...
    99+
    2024-04-02
  • vue+elementUI怎么实现点击按钮互斥效果
    这篇文章主要介绍“vue+elementUI怎么实现点击按钮互斥效果”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue+elementUI怎么实现点击按钮互斥效果”文章能帮助大家解决问题。先看看实...
    99+
    2023-06-30
  • Android自定义Drawable实现圆角效果
    Drawable是一种可绘制资源的载体,如图形、图像等。在实际开发中可以作为view的背景。主要有静态和动态两种方式,静态通过xml描述使用,动态即自定义Drawable。本文实现一个圆形和圆角的背景图片效果。效果图:实现方式:初始化一个B...
    99+
    2023-05-30
    drawable 圆角 roi
  • javascript实现自定义滚动条效果
    在实际项目中,遇到上下滚动条和左右滚动条不在一个DIV内部,所以某些情况下,右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。 一个解决思路是:自定义滚动条,隐藏原始滚动条。 ...
    99+
    2024-04-02
  • Android自定义View实现扫描效果
    本文实例为大家分享了Android自定义View实现扫描效果的具体代码,供大家参考,具体内容如下 演示效果如下: 实现内容: 1、控制动画是竖向或者横向 2、控制动画初始是从底部/...
    99+
    2024-04-02
  • Android自定义View实现时钟效果
    本文实例为大家分享了Android自定义View实现时钟效果的具体代码,供大家参考,具体内容如下 自定义时钟 初学自定义View,先画一个不太成熟的时钟(甚至只有秒针) 时钟效果 ...
    99+
    2024-04-02
  • Android自定义scrollview实现回弹效果
    在ios手机上经常看到页面上下滑动回弹效果,安卓中没有原生控件支持,这里自己就去自定义一个scrollview实现回弹效果 1. 新建MyScrollView并继承ScrollVie...
    99+
    2024-04-02
  • QListWidget怎么实现自定义Item效果
    本文小编为大家详细介绍“QListWidget怎么实现自定义Item效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“QListWidget怎么实现自定义Item效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧...
    99+
    2023-06-30
  • Android 通过自定义view实现水波纹效果案例详解
    在实际的开发中,很多时候还会遇到相对比较复杂的需求,比如产品妹纸或UI妹纸在哪看了个让人兴奋的效果,兴致高昂的来找你,看了之后目的很明确,当然就是希望你能给她; 在这样的关键时候,身...
    99+
    2024-04-02
  • ionic如何实现自定义弹框效果
    这篇文章给大家分享的是有关ionic如何实现自定义弹框效果的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。思路利用ionic自带的弹框$ionicPopup。隐藏头部和尾部,只保留...
    99+
    2024-04-02
  • Android自定义view实现半圆环效果
    本文实例为大家分享了Android自定义view实现半圆环的具体代码,供大家参考,具体内容如下 1.自定义属性 <declare-styleable name="Semicir...
    99+
    2024-04-02
  • Android自定义View实现水波纹效果
    介绍:水波纹散开效果的控件在 App 里面还是比较常见的,例如 网易云音乐歌曲识别,附近搜索场景。看下实现的效果:实现思路: 先将最大圆半径与最小圆半径间距分成几等份,从内到外,Paint 透明度依次递减,绘制出同心圆,然后不断的改变这些同...
    99+
    2023-05-30
    android view 水波纹
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作