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

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

1 多页面切换方法

(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等页面切换;
StackView实现了一个栈式的导航。“栈”大家都知道是怎么回事儿,就是一种数据结构,先进后出(FILO),支持pop、push等操作。StackView用于栈类似的行为方式管理一系列的View(页面或视图),这些View之间可能有内在联系,根据业务需要,可以一级一级向深处的跳转,当前的View上发生点儿什么事儿,就可能会产生一个新的View或返回之前的页面。

2 多页面切换动画

(1)原理:首先页面切换动画目前已知只适用于“隐藏法”的页面切换动画,通过改变属性visible、opacity等的值调用PropertyAnimation动画,或者定义若干个状态,当状态State变化时调用transition中定义的动画;
QML页面切换 可以使用动画控制每个页面的宽度与透明度从而控制页面的平滑切换;
(2)StackView、SwipeView等自带页面切换平滑过渡动画;

3 多个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文件中定义的对象;

参考

1、QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
2、Qt Quick之StackView详解(1)
3、Qt5.7.0的QML实现SwipeView

发布了496 篇原创文章 · 获赞 601 · 访问量 155万+

猜你喜欢

转载自blog.csdn.net/qq_38880380/article/details/103836315