首页 > 其他分享 >QT设置widget背景图片

QT设置widget背景图片

时间:2023-08-19 22:31:46浏览次数:36  
标签:控件 widget 窗口 QT Widget 样式表 设置 背景图片 图片

首先说方法,在给widget或者frame或者其他任何类型的控件添加背景图时,在样式表中加入如下代码,指定某个控件,设置其背景。

类名 # 控件名
{
填充方式:图片路径
}
例如:
QWidget#Widget
{
    border-image: url(:/resource/bg2.png);
}
或者
QFrmae#frame
{
    border-image: url(:/resource/bg2.png);
}

如果单纯改变样式表,没有指定控件的话,内部的其他控件背景也会改变。

特别提醒:类名 # 控件名,其中控件名要准确,假如你把widget的名字改成了其他,那么这里的控件名要一致。

QT设置widget背景图片_背景图片

错误示范:

QT设置widget背景图片_控件_02

如图:效果非常杂乱。

QT设置widget背景图片_控件_03

正确示范:

QT设置widget背景图片_样式表_04

效果:只有指定的widget背景改变,widget内部控件背景不变

QT设置widget背景图片_背景图片_05

我们知道Qt中所有界面类的祖先是QWidget,因此学会给QWidget设置图片是必须掌握的技能之一。但是编程是没有标准答案的,达到同一效果可以有许多不同的方法。那么给窗口设置背景图片又有多少种方法呢?接下来通过写个测试例子看看。

首先使用QtCreator新建一个基于QWidget的工程,然后给工程添加一个资源文件,接着在资源文件中添加一张图片bg.jpg。

1.使用调色板QPalette来设置图片。

QT设置widget背景图片_背景图片_06

首先获得Widget的调色板,然后设置设置调色板背景(setBrush),最后将调色板设置到Widget中。

QT设置widget背景图片_控件_07

由于图片太大导致整个窗口显示不下。

2.在paintEvent事件中绘制图片。

QT设置widget背景图片_控件_08

drawPixmap在Widget的整个矩形区域绘制背景图片,第三个参数为要绘制的图片区域,传入空的矩形表示整个图片区域。

QT设置widget背景图片_样式表_09

通过这种方式可以将图片平铺到窗口上,缺点就是要使用paintEvent事件需要新建一个类,不适合子窗口。

3. 使用样式表(setStyleSheet).

使用样式表可以很方便设置界面,而且非常高效,还能让界面和逻辑分离。真的是Qt里非常好用的一个东西,设置背景图片的语句也很简单。

QT设置widget背景图片_控件_10

一句话就搞定了,这里使用border-image属性可以让图片平铺到窗口,效果与第二点一样。不过在本例中由于Widget是顶层窗口,所以直接设置样式表也不会显示。所以样式表比较适合子窗口来使用。

4.使用间接的方式来设置背景,比如说在窗口上覆盖一个QLabel,这个label始终与窗口一样大。然后在label中设置图片,视觉效果上和直接给窗口设置背景图片一样。

QT设置widget背景图片_控件_11

创建一个label作为Widget的子窗口,然后设置图片。通过在Widget的resizeEvent事件中设置label的大小与Widget一致。这里需要注意调用QLabel的setScaledContents(true),否则效果和第一种一样。由于QLabel可以用来显示动图因此使用这种方式可以实现窗口的动态背景图片。

标签:控件,widget,窗口,QT,Widget,样式表,设置,背景图片,图片
From: https://blog.51cto.com/u_15641375/7152930

相关文章

  • Widget、Element、RenderObject三者之间的关系
     Widget不是真正渲染UI的对象,它只是Element的一个配置描述,去通知Element应该如何去渲染,Widget和Element之间是⼀对一的关系Element持有RenderObject和Widget。RenderObject才是实际渲染的对象,三者的关系是:配置⽂件Widget⽣成了Element,⽽后创建RenderObject关联到Element......
  • qt qq登录界面
    步骤:    做好了一个新的界面:   接下来开始添加图片:                  接下来进行界面的切换。         接下来通过点击按钮,进行界面的切换。           ......
  • qt之QRadioButton中选中和未被选中的两种状态使用
    点击按钮,选择转到槽的时候,选择cliked(bool)选项 以下是代码部分关于两种状态的使用1voidWidget::on_radioButton_clicked(boolchecked)2{3if(checked==0){4qDebug()<<4/qRound(1.4999999);5qDebug()<<"000";6}elseif(checked==......
  • QT移植ARM开发板步骤
    原文:https://www.cnblogs.com/linux-learn/p/17058779.html一、新建编译平台更改../qt-everywhere-src-5.12.9/qtbase/mkspecs/linux-arm-gnueabi-g++/qmake.conf 目录下的文件1、添加:QT_QPA_DEFAULT_PLATFORM=linuxfbQMAKE_CFLAGS_RELEASE+=-O2-march=armv7-aQMAKE_C......
  • MQTTnet4入门(二)实现客户端
    上一篇写服务端的文章《MQTTnet4入门(一)实现服务端》已经是去年年底,现在MQTTnet的版本是4.2.1.781,总的来说改动不大。下面以新版为例实现一个客户端。varmqttClientOptions=newMqttClientOptionsBuilder().WithTcpServer("地址",端口).Wit......
  • thingsboard gateway mqtt 连接详解
    mqtt的配置可见官网说明:https://thingsboard.io/docs/iot-gateway/config/mqtt/ 这里主要从源码说一下tbgateway里,mqttconnector的启动过程,和mqttconnector怎么工作  mqttconnector实现消息处理,主要在几个回调方法上,下面就主要方法说明:   接收消息后,就是处理......
  • tb自带mqtt服务器源码学习
     tb自带的mqtt服务器,是基于netty实现的启动类是:MqttTransportService,启动的配置参数如下图: 编排处理channel中数据的handler的是 MqttTransportServerInitializercontext的isProxyEnabled默认为flase,sslHandlerProvider是null所以处理数据的handler如下图圈中的 说......
  • StatefulWidget 的生命周期
     https://zhuanlan.zhihu.com/p/500617966 安卓onCreateonStartonResumeonPauseonStoponDestroyiOSviewDidLoadviewWillAppearviewDidAppearviewWillDisappearviewDidDisappearviewDidUnloadfluttercreateStateinitStatedidChangeDependencies//此组......
  • (一)Qt与Python—PySide的简介及安装
    目录1.Pyside的简介2.pyside的安装3.pyside的Helloworld程序4.参考文献及网站连接1.Pyside的简介​PySide(在本文中指代PySide2和PySide6)是一个Python的图形化界面(GUI)库,由C++版的Qt开发而来,在用法上基本与C++版没有特别大的差异。PySide是一个python绑定的跨平台图形化......
  • QtWebChannel和JavaScript进行通信(简单理解)
    说明在使用Qt(C++)和JavaScript之间实现通信时,通常会使用一些模块和技术来使两者能够交互和传递数据。这种通信通常用于在Qt应用程序中嵌入Web内容,或者在Web页面中嵌入Qt应用程序。以下是一些常用的模块和技术,以及它们的作用QtWebEngine模块:作用:QtWebEngine是Qt中的Web引擎,允......