QtQuick多页面切换、多页面切换动画、多个qml文件数据交互

一、QtQuick多页面切换方法

(1)“隐藏法”

前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在;

要显示的视图visible设为true或者透明度opacity设为1,显示出来;

(2)“动态”

var component = Qt.createComponent("Page1.qml").createObject(container,{width:100,heisght:100);

创建一个基于“Page1.qml”的组件,在组件基础上创建一个新对象,对象放在container父对象里面,这个新创建的对象长度100,宽度100;createObject函数原型为:

object createObject(QtObject parent, object properties)

销毁方法:(1)component.destroy();(2)Page1.qml顶层Item的id,id.destroy();

新对象屏蔽相同区域父对象原来的的鼠标响应:MouseArea{ anchors.fill:parent };

新对象大小若超出container父对象的区域:设置父对象 clip:true;

(3)“Loader加载”

Item {    
    width: 200; height: 200       
    Loader { id: pageLoader }

MouseArea {         anchors.fill: parent         onClicked: pageLoader.source = "Page1.qml"    }

}

定义一个Loader,当需要加载时设置pageLoader.source="Page1.qml";

销毁时设置pageLoader.source="",空字符串即可;

(4)使用StackView、SwipeView等页面切换;

二、QtQuick多页面切换动画

(1)原理:首先页面切换动画目前已知只适用于“隐藏法”的页面切换动画,通过改变属性visible、opacity等的值调用PropertyAnimation动画,或者定义若干个状态,当状态State变化时调用transition中定义的动画;

QML页面切换 可以使用动画控制每个页面的宽度与透明度从而控制页面的平滑切换;

(2)StackView、SwipeView等自带页面切换平滑过渡动画;

三、多个qml文件数据交互

(1)“共同上级”

如果1.qml和2.qml是平级,那么你需要建立一个包含他们两个的上级,在上级建立参数,由上级的参数来实现1,2的数据交换;

(2)“父子级(上下级)”

1.qml需要访问2.qml中的数据:把1.qml定义在2.qml里面作为下级(子级),反之亦然;

总原则:下级可以访问上级数据,下级修改某个数据会通知上级;其他情况可能不会发送修改通知,数据不一致;

若qml文件中导入javascript文件 import "XXX.js" ,则在XXX.js文件中可以直接使用qml文件中定义的对象;
---------------------
作者:zusi_csdn
来源:CSDN
原文:https://blog.csdn.net/zusi_csdn/article/details/80546853

原文地址:https://www.cnblogs.com/wxmwanggood/p/11038067.html

时间: 2024-08-11 00:42:35

QtQuick多页面切换、多页面切换动画、多个qml文件数据交互的相关文章

H5单页面手势滑屏切换原理

H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 假设有5个页面,每个页面占屏幕100%宽,则创建一个DIV容器viewport,将其宽度(width) 设置为500%,然后将5个页面装入容器中,并让这5个页面平分整个容器,最后将容器的默认位置设置为0,overflow设置为hidden,这样屏幕就默认显示第一个页面. <div id="v

[转]IOS Segment页面之间view的切换

有三个view,分别为view1.view2.view3,通过UISegmentedControl进行三个view的切换. Ios代码   @interface UIViewDemoViewController : UIViewController { IBOutlet UIView *view1; IBOutlet UIView *view2; IBOutlet UIView *view3; } - (IBAction)switchViews:(id)sender; @end 在Interfa

前端的小玩意(9.1)——做一个仿360工具箱的web页面(Tab按钮切换)

需求: ①写一个web版的360工具箱,示意图如下: ②无左上返回按钮,右上按钮有皮肤切换,下拉框(但无点击逻辑): ③按钮点击有事件,但事件是console.log(按钮名): ④可以在全部工具和我等工具自由切换: ⑤可以点击左下角的编辑,然后根据实际表现设置: ⑥可以在全部工具里面,点击按钮,然后添加到我的工具这边来: ⑦效果尽量与原图相同,只使用jquery库: 效果网址: http://jianwangsan.cn/toolbox (一)tab页切换 ①切图: 先切图,如图:(不想用他的

activity+fragment多次切换出现页面空白问题

刚上手一个项目 懒的用viewpager+fragment模式,尽管在后面的项目中还是用到viewpager+fragment.先说说问题,多次切换fragment的时候页面出现空白,刚开始以为传递的参数有问题,但是也确实出现这个问题,手贱导致. 比如根据传入的tag实例化的时候,错把第一个数据和第二个传入相同的数据.copy的错,死活切换不了,后来debug才搞定: /** * 初始化 newInstance 管理fragment页面 同时设置当期fragment页面 */ public st

.net(C#)在vs2010版本下的MVC如何配置才能切换静态页面(html)

由于vs2010用的人比较多,虽然建mvc项目vs2010可能还不成熟,但鉴于每个人的成长有限,每个地方的资源有限,最主要的是为了解决问题,所以先不管那么多了. 用vs2010为公司网站建站,要求js控制速度快,但vs2010的MVC的默认项目的默认入口是Views下的Home下的Index.aspx文件,如图1,为实现".net(C#)在vs2010版本下的MVC如何配置才能切换静态页面(html)"效果,找到views下的web.config文件(注意:不是项目的web.confi

activity页面多次反复切换会变卡。

在AndroidMainfest页面里声明页面跳转是这样. <activity android:name="com.activity.Testupdate" android:theme="@style/Transparent" android:configChanges="keyboardHidden|orientation|screenSize" android:screenOrientation="portrait"

微信小程序开发--路由切换,页面重定向

这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1  wx.navigateTo(Object) 功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到当前页面. wx.navigateTo({ //当前页面对应的JS文件内 控制模板 url: 'test?id=1' //需要切换到的页面路劲,此处为

vue切换路由页面内容没有重载

项目中遇到这样一个问题: 在一个地方填了一个申请的表单,需要在另一个页面的列表上显示出来这条申请的数据,但是由于vue的缓存,在切换路由时列表上并没有及时更新数据,解决方法如下: vue路由切换时页面内容没有重新加载 把mounted()改成activated()就行了.(activated用于初始化页面数据等) 原文地址:https://www.cnblogs.com/knuzy/p/9783535.html

MUI底部导航切换子页面

1.登陆页面进入之后,进入到main页面,main页面只有一个底部导航,然后引入子页面进行渲染. <nav class="mui-bar mui-bar-tab" id="tabbar"> <a class="mui-tab-item mui-active" href="html/applyy.html" id="apply"> <span class="mui-ic