【QML】StackView上层页面半透明,显示下层页面

1、 应用场景

有时候需要模拟弹窗效果,需要下层的页面半透明显示。仅仅将上层页面背景设置为透明并不能实现这个效果,下层的页面依然被覆盖。Qt帮助文档中有如下代码,经测试有效果。

2、 代码

重点标记:

  • 下层页面需要设置这个属性StackView.visible: true
  • 设置后有个问题:如果此页面有可点击的组件,被放到下层后依然可以被点击,这不是我们想要的。
  • 解决思路是当页面被放入下层后用一个MouseArea覆盖。
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

Window {
    width: 1000
    height: 600
    visible: true
    title: qsTr("Hello World")

    Component {
        id: page
        Rectangle {
            property real pos: StackView.index * stackView.offset
            property real hue: Math.random()
            color: Qt.hsla(hue, 0.5, 0.8, 0.6)
            border.color: Qt.hsla(hue, 0.5, 0.5, 0.9)
            StackView.visible: true	//重点
            Text{
                text: stackView.depth
            }
            
            //防止在下层时被点击
			MouseArea{
		        id: _mMaskTouch
		        anchors.fill: parent
		        z: 99
		    }
		    onFocusChanged: {
		        _mMaskTouch.enabled = !focus
		    }
        }
    }

    StackView {
        id: stackView
        property real offset: 10
        width: 100; height: 100

        initialItem:page

        pushEnter: Transition {
            id: pushEnter
            ParallelAnimation {
                PropertyAction { property: "x"; value: pushEnter.ViewTransition.item.pos }
                NumberAnimation { properties: "y"; from: pushEnter.ViewTransition.item.pos + stackView.offset; to: pushEnter.ViewTransition.item.pos; duration: 400; easing.type: Easing.OutCubic }
                NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 400; easing.type: Easing.OutCubic }
            }
        }
        popExit: Transition {
            id: popExit
            ParallelAnimation {
                PropertyAction { property: "x"; value: popExit.ViewTransition.item.pos }
                NumberAnimation { properties: "y"; from: popExit.ViewTransition.item.pos; to: popExit.ViewTransition.item.pos + stackView.offset; duration: 400; easing.type: Easing.OutCubic }
                NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 400; easing.type: Easing.OutCubic }
            }
        }

        pushExit: Transition {
            id: pushExit
            PropertyAction { property: "x"; value: pushExit.ViewTransition.item.pos }
            PropertyAction { property: "y"; value: pushExit.ViewTransition.item.pos }
        }
        popEnter: Transition {
            id: popEnter
            PropertyAction { property: "x"; value: popEnter.ViewTransition.item.pos }
            PropertyAction { property: "y"; value: popEnter.ViewTransition.item.pos }
        }
    }

    Button{
        text: "push"
        width: 100
        height: 100
        x: 300
        onClicked: {
            stackView.push(page)
        }
    }

    Button{
        text: "pop"
        width: 100
        height: 100
        x: 300
        y: 200
        onClicked: {
            stackView.pop()
        }
    }
}

3、测试效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/180249.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

三、Keil安装芯片包、下载固件库、建立STM32工程模板

目录 一、首先在Keil软件上安装好芯片包 二、下载官方固件库 三、建立基于固件库的Keil5工程模板 一、首先在Keil软件上安装好芯片包 STM32有很多系列的芯片,我们平常用的最多的是STM32F1系列的,因此安装F1系列的芯片包在我们初学时,只按照…

2023亚太杯数学建模A题思路 - 采果机器人的图像识别技术

# 1 赛题 问题A 采果机器人的图像识别技术 中国是世界上最大的苹果生产国,年产量约为3500万吨。与此同时,中国也是世 界上最大的苹果出口国,全球每两个苹果中就有一个,全球超过六分之一的苹果出口 自中国。中国提出了一带一路倡议…

Java引用和内部类

引用 引用变量 引用相当于一个 “别名”, 也可以理解成一个指针. 创建一个引用只是相当于创建了一个很小的变量, 这个变量保存了一个整数, 这个整数表示内存中的一个地址. new 出来的数组肯定是在堆上开辟的空间,那么在栈中存放的就是引用,引用存放的的就是一个对象的地址,代表…

中部A股第一城,长沙如何赢商?

文|智能相对论 作者|范柔丝 长沙的马路,都很有故事。 一条解放西路,是全国人民都争相打卡的娱乐地标;一条太平街,既承载了历史的厚重又演绎着现代的鲜活...... 但如果来到河西的桐梓坡路,风景会变得截然不同。 沿…

Javascript中的宏任务与微任务

事件循环 JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。为了协调事件、用户交互、脚本、UI 渲染和网络处理等行为,防止主线程的不阻塞,Event Loop 的方案应用而生。Event Loop 包含两类:一…

[Linux 基础] Linux使用git上传gitee三板斧

文章目录 1、使用git1.1 安装git1.2 在Gitee上创建项目1.2.1 使用Gitee创建项目1.2.2 上传本地代码到远端仓库 1.3 git上传三板斧1.3.1 三板斧第一招:git add1.3.2 三板斧第二招:git commit1.3.3 三板斧第三招:git push 1、使用git 1.1 安装…

01 第一个C++程序:Hello, World!

系列文章目录 01 第一个C程序:Hello, World! 目录 系列文章目录 文章目录 前言 二、创建项目 三、书写代码 代码逐行解释 其它细节 总结 前言 这是c入门的第一个程序。 一、配置c环境 我们要使用visual studio创建一个新的项目时,需要安装c, 这里我没…

大数据分析仓库Kylin

一、Kylin 定义 Apache Kylin 是一个开源的分布式分析引擎,提供 Hadoop/Spark 之上的 SQL 查询接口及多维分析能力以支持超大规模数据,最初由 eBay 开发并贡献至开源社区。它能在亚秒内查询巨大的 Hive 表。 二、Kylin 架构 A、REST Server 是应用程序…

透过一台电视,看到万家星闪

此前我们说过,实现万物互联的梦想,不仅要关注光纤、5G所打通的智能联接,更要关注短距传输所支撑的最后一段距离。 在咫尺之间,方寸之地,数据的传输与设备的协同依旧会遇到大量挑战。反过来说,一旦出现稳定、…

为企业解决设备全生命周期需求,凌雄科技凸显DaaS增长价值

企业成长离不开投资,但毫无疑问的是,投资最有价值的部分在业务。相比之下,诸如办公设备之类的固定资产投资,很容易变成企业现金流的吞噬者。从购买、运维到保养、折旧、回收,现代企业在越来越大的办公设备规模面前&…

利用GenericMenu创建上下文菜单或下拉菜单

使用GenericMenu 创建自定义上下文菜单和下拉菜单丰富自己的编辑器功能。 GenericMenu 介绍 变量 allowDuplicateNames 允许菜单具有多个同名的菜单项。 公共函数 AddDisabledItem 向菜单添加已禁用的项。 AddItem 向菜单添加一个项。 AddSeparator 向菜单添加一个分隔符项…

优化器的选择

优化器使用SDG和Adam的loss也不同 每个文件夹大概包含的图片: 在这种数量级下的图像分类优先选择SDG。

使用原生js通过ajax实现服务器渲染的简单代码和个人改进

文章目录 前文提要代码实现主要参考服务器渲染实现逻辑网页呈现效果 代码分段讲解提要html的body部分css部分js部分xhr.open函数AJAX-onreadystatechange事件function函数简写方法附件功能:选中行 高亮 代码全文 前文提要 本文仅做个人学习记录,如有错误…

数字化转型过程中面临最大的问题是什么?如何借助数字化工具实现快速转型?

在科技快速发展的时代,数字化转型已经成为企业的重要战略。当企业努力适应数字化时代并取得成功时,他们可能会面临各种必须有效应对的挑战。   数字化转型不仅仅是将新技术应用到企业的运营中,还需要对企业的运营方式、与客户的互动方式和价…

多篇论文介绍-可变形卷积

01 具有双层路由注意力的 YOLOv8 道路场景目标检测方法 01 摘要: 随着机动车的数量不断增加,道路交通环境变得更复杂,尤其是光照变化以及复杂背景都会干扰目标检测算法的准确性和精度,同时道路场景下多变形态的目标也会给检测任务造成干扰&am…

计算机视觉的应用19-基于pytorch框架搭建卷积神经网络CNN的卫星地图分类问题实战应用

大家好,我是微学AI,今天给大家介绍一下计算机视觉的应用19-基于pytorch框架搭建卷积神经网络CNN的卫星地图分类问题实战应用。随着遥感技术和卫星图像获取能力的快速发展,卫星图像分类任务成为了计算机视觉研究中一个重要的挑战。为了促进这一…

使用Python的turtle模块创建一幅哆啦A梦

1.1引言: 在Python中,turtle模块是一个非常有趣且强大的工具,它允许我们以一个可视化和互动的方式学习编程。通过调用各种命令,我们可以引导turtle画出一个指定的图形。在本博客中,我们将使用turtle模块来绘制一幅哆啦…

UML建模图文详解教程01——Enterprise Architect安装与使用

版权声明 本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl Enterprise Architect概述 官方网站:https://www.sparxsystems.cn/products/ea/;图示如下: Enterprise Architect是一个全功能的、基于…

IDEA中注释快捷键及模板

单行注释 将光标放置于要注释所在行,使用 Ctrl /, 添加行注释,再次使用,去掉行注释 若需要将多行进行单行注释,只需要选中要注释的多行,然后使用 Ctrl /, 添加行注释,再次使用&a…

【Linux】权限理解【文件权限以及目录权限详解、以及umsk程序掩码知识详解】

权限理解 一、Linux权限的概念二、su [用户名] : 切换用户三、Linux权限管理文件(一)文件访问者的分类(人)(二)文件类型和访问权限(事物属性)(1)第…