QT设置widget背景图片

这篇具有很好参考价值的文章主要介绍了QT设置widget背景图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

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

QT设置widget背景图片,C语言教程,qt,服务器,前端

错误示范:

QT设置widget背景图片,C语言教程,qt,服务器,前端

如图:效果非常杂乱。

QT设置widget背景图片,C语言教程,qt,服务器,前端

正确示范:

QT设置widget背景图片,C语言教程,qt,服务器,前端

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

QT设置widget背景图片,C语言教程,qt,服务器,前端

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

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

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

QT设置widget背景图片,C语言教程,qt,服务器,前端

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

QT设置widget背景图片,C语言教程,qt,服务器,前端

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

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

QT设置widget背景图片,C语言教程,qt,服务器,前端

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

QT设置widget背景图片,C语言教程,qt,服务器,前端

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

3. 使用样式表(setStyleSheet).

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

QT设置widget背景图片,C语言教程,qt,服务器,前端

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

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

QT设置widget背景图片,C语言教程,qt,服务器,前端

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

到了这里,关于QT设置widget背景图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • 【QT】 QLabel背景图片自适应窗口大小

    【QT】 QLabel背景图片自适应窗口大小

    这是最终效果: 想要图片跟随窗口自适应大小,首先我们先对QWidget进行网格布局,布局效果如下: 布局完成后添加 QLabel 代码,新建 QLabel 并且设置为可扩展内容,再设置图片放置最后面,否则图片在最前面会遮挡控件。 然后重写 qt 的绘画事件: 这是绘画事件的实现代码:

    2024年02月15日
    浏览(12)
  • 如何在Qt Desginer中设置背景图片,且不覆盖其它控件

    如何在Qt Desginer中设置背景图片,且不覆盖其它控件

    正常情况,我们直接通过在样式表里设置背景图片会出现背景图片覆盖其它控件的情况,比如下面操作: 首先右击空白处,点击改变样式表。 然后选择background-image 然后点击铅笔图标 之后我们要先添加前缀,也就是我们的项目名,比如我的这个项目名为Snake,那就添加一个名

    2024年02月03日
    浏览(13)
  • 【最全IDEA个性化教程】idea设置主题+恢复主题默认设置+设置选中代码颜色+关键字颜色+设置字体大小、样式、颜色+设置背景颜色、图片+设置导航栏背景颜色+设置控制台字体样式及背景+常用快捷键)

    【最全IDEA个性化教程】idea设置主题+恢复主题默认设置+设置选中代码颜色+关键字颜色+设置字体大小、样式、颜色+设置背景颜色、图片+设置导航栏背景颜色+设置控制台字体样式及背景+常用快捷键)

    主题亮暗设置 如果在系统自带的主题上进行了一些字体的个性化后想恢复默认设置,直接在更换主题处-点击小齿轮-选择Restore Defaults 进阶:下载主题使用 下载该主题的地址 idea更换主题,配置字体的教程参考 主题下好以后后缀为.jar 导入一下下好的主题,然后OK-OK-OK后IDEA会

    2024年02月03日
    浏览(92)
  • vue设置页面背景及背景图片

    vue设置页面背景及背景图片

    本地静态图片  cdn图片 设置背景色 实战-PC web登录页 实战-小程序登录页

    2024年02月12日
    浏览(17)
  • flutter背景图片设置

    flutter背景图片设置

    1、在配置文件pubspec.yaml中,设置以下代码 2、如果目录中没有assets文件夹,则创建一个文件夹,并且取名为assets,在此文件夹中存放图片资源即可,如果想分文件夹管理,在assets目录下创建文件夹,并且在配置文件pubspec.yaml中加入路径即可 3、图片的使用、在界面文件中,有

    2024年02月04日
    浏览(16)
  • CSS 设置背景图片

    一、基本设置 使用 CSS 可以通过以下属性设置背景图片: background-image : 设置背景图片的 URL。 background-size : 设置背景图片的大小。可以设置为绝对像素值,也可以设置为百分比或 \\\"cover\\\"(填充整个容器)或 \\\"contain\\\"(完整显示图片)。 background-repeat : 设置背景图片是否重复。可

    2024年02月12日
    浏览(14)
  • VSCode 如何设置背景图片

    VSCode 如何设置背景图片

     VSCode 设置背景图片 1.打开应用商店,搜索 background ,选择第一个,点击安装。 2. 安装完成后点击设置,点击扩展设置。 3.点击在 settings.json 中编辑。    4.将原代码注释后,加入以下代码。   5. 保存后重启 VSCode 就能看到设置的背景图片啦。 6.最后再点击设置,点击颜色主

    2024年02月06日
    浏览(12)
  • 小程序背景图片设置方法

    3、利用image标签做到设置背景图片 思路:我们只要利用css中的z-index改变层级既可做到变成背景图的样子 看代码 wxml: wxss: 这样我们也可以做到背景图的效果。 相关推荐:小程序开发教程 以上就是小程序背景图片设置方法的详细内容,更多请关注群英网络其它相关文章!

    2024年02月07日
    浏览(15)
  • Eclipse背景图片的设置

    Eclipse背景图片的设置

    我在网上也查找了很多教程,发现有些小伙伴按照如下路径并不能找到images文件夹:、eclipsepluginsorg.eclipse.ui.themes_1.2.1800.v20220316-1102,以及不知如何设置透明度 下面我用最简单的方式教大家解决这些问题。 首先打开eclipse文件夹按照该路径找到images:(ecil是我自己创建的ecl

    2024年02月05日
    浏览(12)
  • Uniapp设置页面的背景图片

    设置背景有两种 注意一个是全背景设置,一个是在相应的view内设置背景 这是设置大背景 这是在相应的view内设置view块的背景

    2024年02月08日
    浏览(17)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包