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

Posted 2022-01-17 wxmwanggood

一、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