首页 > 编程知识 正文

qpushbutton点击效果,qt自定义窗口样式

时间:2023-05-04 21:27:39 阅读:111292 作者:718

Qt技术教室开始了。 更多精彩、快乐的内容在等着你。 请快点报名。 组号: 655815739

另一方面,在选择了上一个Qt的窗口删除部件后的聚焦虚线框中,为了删除聚焦虚线框,在按钮的样式中添加了以下样式。

QPushButton{ background:red; border:0px; }像这样用鼠标点击按钮后,没有按压压痕的反馈,感觉没有点击。

上面两个按钮添加了border:0px; 去掉边框,点击后没有凹陷的感觉,之后两个按钮上没有border:0px;按钮原来的点击留下了凹陷的感觉,但是为了去掉矩形的虚线框,不得已增加了border:0px; 去掉边框,保留了背景色的样式。 本编为将自定义按钮 在鼠标 悬浮、按下、松开后的效果

二、套路关于自定义按钮 在鼠标 悬浮、按下、松开后的效果一是设置背景图,主要是需要自己设计按钮的效果图,二是风格控制不同状态按钮的显示效果。 虽然代码很简单,但是效果很普通。

1、设置背景图方式/*帐户注册图标(///正常显示的效果qpushbutton # pbuttonregistaccount (border-image 3360 URL ) :/按下pbuttonregistaccount : hover { border-image 3360 URL 65:/resources/register account _ hood//鼠标时显示的效果qpushbushbubue pbuttonregistaccount : pressed { border-image 3360 URL 65:/resources/register account _ }/*忘记密码图标*/qpup } qpushbutton # pbuttonforgetpassword 3360 hover { border-image : URL 65:/resources/forget password _ hover.png } pbuttonforgetpassword : pressed { border-image : URL 65:/resources/forget password _ pressed.pressed } http://ww

这里我们需要准备几张图片:

http://www.Sina.com/http://www.Sina.com /

运行效果图:

3358 www.Sina.com/qpushbutton # pbuttonok { color : white; background-color : RGB (14,150,254 ); border :1 pxsolidrgb (11,137,234 ); } qpushbutton # pbuttonok : hover { color : white; background-color : RGB (44,137,255 ); border :1 pxsolidrgb (11,137,234 ); } qpushbutton # pbuttonok : pressed { color : white; background-color : RGB (14,135,228 ); border :1 pxsolidrgb (12,138,235 ); padding-left:3px; padding-top:3px; } qpushbutton # pbuttoncancel { color : black; background-color : RGB (238、238、238; border :1 pxsolidrgb (183,183,183 ); } qpushbutton # pbuttoncancel : hover { color : black; background-color : RGB (228、240、250 ); border :1 pxsolidrgb (15,150,255 ); } qpushbutton # pbuttoncancel : pressed { color : black; background-color : RGB (204、228、247 ); border :1 pxsolidrgb (1,84,153 ); padding-left:3px; padding-top:3px; }

在上图中可以确定和

取消两个按钮在鼠标 悬浮、按下、松开后的效果。在鼠标悬浮时背景色加深,按下时设置了padding,给人一种按钮被按下的感觉。

登录按钮效果样式 QPushButton{ font-family:Microsoft Yahei; color:white; background-color:rgb(14 , 150 , 254); border-radius:5px;}QPushButton:hover{ background-color:rgb(44 , 137 , 255);}QPushButton:pressed{ background-color:rgb(14 , 135 , 228); padding-left:3px; padding-top:3px;}

这种方法比上面用图标作为背景的好处就是可以随意更改文字以及文字的大小、位置、字体等显示效果

综上: 1、设置背景图方式

优点 :样式简单,直接设置border-image即可,可以选取漂亮的UI图片总体上可能会比单纯通过样式设置显示效果要好一些。(如果UI图选取效果不好的情况下,效果可能没有单纯设置样式好看,这就要看个人的审美观了mldld(∩_∩)O!)

缺点 :需要自己制定背景效果图, 可能比较耗时

2、通过设置样式控制不同显示效果

优点:不需要准备背景图,直接通过样式设置,简单、粗暴,想怎么设置就怎么设置(前提是要会一点CSS),能够更好地控制显示效果(比如控制文字的大小,位置、字体等)。

缺点:样式稍微复杂,需要懂更多的CSS样式,如果需要在按钮上加图标什么的就必须要加载背景图片了,单纯靠样式解决不了。

以上总结了两种方法的优缺点,可以说这两种方法可以相互取长补短,基本上运用好这两种方式就能够做出精美的按钮了,具体采样哪种方式就看自己如何选择了哈 O(∩_∩)O!

注意 QPushButton{ border-image:url(:/Resources/registeraccount_hover.png);}

如果我们使用如上样式,将会对所有的QPushButton进行设置样式,如果只需要给某一个则用以下格式:

“QPushButton#” + “按钮名称(objectName)”

我们主要用到了按钮的三种状态,分别是鼠标悬浮、按下、松开 。

// 正常状态或者鼠标松开按钮的状态QPushButton{}//鼠标悬浮在按钮上的状态QPushButton:hover{}//鼠标按下按钮时的状态QPushButton:pressed{}// 我们只需在不同状态下的{}中填写不同的样式,在我们对按钮进行操作时就会显示不同的样式效果。 尾

以上只是简单地介绍了对按钮设置的一些样式,其他控件的样式可以查看Qt的文档。这里我们通过设置样式实现了自定义 按钮在不同状态下的效果,不再依靠系统自带的凹陷效果。

下面是我模仿QQ做的一个界面。欢迎大家随时交流哈 O(∩_∩)O!

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。