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文件中定義的對象;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM