QML Loader 不会更改其活动状态

问题描述 投票：0回答：1

在下面的qml代码中

ApplicationWindow
{

    id: mainItem

    width: 1024
    height: 600


    property var firstVal: true
    property var secondVal: true
    property var thirdVal: true

    


    ////////////////////////////////////////////////////////////////////////////////
    // HOME PAGE

    Loader
    {
        id:homeLoader
        sourceComponent: homeComponent
        active: false
        visible: false
    }




    Component
    {
        id:homeComponent

        PageHome
        {
            id:home
            visible: true;
            
            onSgnSetFirst():  // signal sgnSetFirst(val)
            {
              firstVal = val
            }

            onSgnSetSecond(): // signal sgnSetSecond(val)
            {
              secondVal = val
            }

            onSgnSetThird():  // signal sgnSetThird(val)
            {
              thirdVal = val
            }
        }
    }



    ////////////////////////////////////////////////////////////////////////////////
    // FIRST PAGE

    Loader
    {
        id:firstLoader
        sourceComponent: firstComponent
        active: false
        visible: false
    }


    Component
    {
        id:firstComponent

        PageFirst
        {
            id:firstPage
            visible: true;
        }
    }



    ////////////////////////////////////////////////////////////////////////////////
    // SECOND PAGE

    Loader
    {
        id:secondLoader
        sourceComponent: secondComponent
        active: false
        visible: false
    }


    Component
    {
        id:secondComponent

        PageSecond
        {
            id:secondPage
            visible: true;
        }
    }



    ////////////////////////////////////////////////////////////////////////////////
    // THIRD PAGE

    Loader
    {
        id:thirdLoader
        sourceComponent: thirdComponent
        active: false
        visible: false
    }


    Component
    {
        id:thirdComponent

        PageThird
        {
            id:thirdPage
            visible: true;
        }
    }









    ///////////////////////////////////////////////////////////////////////////////////////////////////////
    //
    //
    //
    ///////////////////////////////////////////////////////////////////////////////////////////////////////

    Rectangle
    {

        id:rectangleMain

        width: 1024
        height: 600
        color: "transparent"

        state: "rms_HOME"

        states: [
            State
            {
                name: ""

                PropertyChanges {target: homeLoader;     active:  false}
                PropertyChanges {target: firstLoader;    active:  false}
                PropertyChanges {target: secondLoader;   active:  false}
                PropertyChanges {target: thirdLoader;    active:  false}

                PropertyChanges {target: homeLoader;     visible: false}
                PropertyChanges {target: firstLoader;    visible: false}
                PropertyChanges {target: secondLoader;   visible: false}
                PropertyChanges {target: thirdLoader;    visible: false}
            },

            //////////////////////////////////////////////////////////////////////////////////////////////////
            // HOME PAGE

            State
            {

                name: "rms_HOME"

                PropertyChanges {target: homeLoader;     active:  true     }
                PropertyChanges {target: firstLoader;    active:  firstVal }
                PropertyChanges {target: secondLoader;   active:  secondVal}
                PropertyChanges {target: thirdLoader;    active:  thirdVal }

                PropertyChanges {target: homeLoader;     visible: true }
                PropertyChanges {target: firstLoader;    visible: false}
                PropertyChanges {target: secondLoader;   visible: false}
                PropertyChanges {target: thirdLoader;    visible: false}

            },

            //////////////////////////////////////////////////////////////////////////////////////////////////
            // FIRST PAGE

            State
            {

                name: "rms_FIRST"

                PropertyChanges {target: homeLoader;     active:  false}
                PropertyChanges {target: firstLoader;    active:  true }
                PropertyChanges {target: secondLoader;   active:  false}
                PropertyChanges {target: thirdLoader;    active:  false}

                PropertyChanges {target: homeLoader;     visible: false}
                PropertyChanges {target: firstLoader;    visible: true }
                PropertyChanges {target: secondLoader;   visible: false}
                PropertyChanges {target: thirdLoader;    visible: false}

            },

            //////////////////////////////////////////////////////////////////////////////////////////////////
            // SECOND PAGE

            State
            {

                name: "rms_SECOND"

                PropertyChanges {target: homeLoader;     active:  false}
                PropertyChanges {target: firstLoader;    active:  false}
                PropertyChanges {target: secondLoader;   active:  true }
                PropertyChanges {target: thirdLoader;    active:  false}

                PropertyChanges {target: homeLoader;     visible: false}
                PropertyChanges {target: firstLoader;    visible: false}
                PropertyChanges {target: secondLoader;   visible: true }
                PropertyChanges {target: thirdLoader;    visible: false}

            },

            //////////////////////////////////////////////////////////////////////////////////////////////////
            // THIRD PAGE

            State
            {

                name: "rms_THIRD"

                PropertyChanges {target: homeLoader;     active:  false}
                PropertyChanges {target: firstLoader;    active:  false}
                PropertyChanges {target: secondLoader;   active:  false}
                PropertyChanges {target: thirdLoader;    active:  true }

                PropertyChanges {target: homeLoader;     visible: false}
                PropertyChanges {target: firstLoader;    visible: false}
                PropertyChanges {target: secondLoader;   visible: false}
                PropertyChanges {target: thirdLoader;    visible: true }

            }
        ]
    }
}

有四个屏幕：“主页”、“第一页”、“第二页”和“第三页”。它们中的每一个都由一个 Loader 管理。每个 Loader 通过 

state
项的 
rectangleMain
属性来启用/禁用。当 
rectangleMain.state
属性设置为 
rms_HOME
时，
homeLoader
处于活动状态且可见，而其他 Loader 不可见，但可以处于活动或不活动状态，具体取决于 
firstVal
、
secondVal
和 
thirdVal
。仅当 
rectangleMain.state
属性从 
rms_FIRST
或 
rms_SECOND
或 
rms_THIRD
更改为 
rms_HOME
时，该逻辑才能正常工作，但如果 
rectangleMain.state
属性等于 
rms_HOME
和 
firstVal
，则该逻辑不起作用或 
secondVal
或 
thirdVal
更改其值。为什么？我该如何解决这个问题？

非常感谢 问候

qt qml loader
1个回答
0
投票

我已经为您做了一个最小的实现。它以一种有用的方式使用加载程序，并根据我的了解实现您想要的。给你：

    import QtQuick 2.0

ApplicationWindow
{
  
    //because your example is not working i am trying to implement it like this...
    //I`ve been testing it with rectangles and it works.
    //From what I see you can achieve your goal if you do it like follows:

    id: root

    width: 1024
    height: 600

    property string currentPage: "home"
  
    // use one loader to load the current component that you need, dont use multiple ones
    Loader
    {
        id:pageLoader
        
        active: true
        visible: true
        
        // here we switch the source of the loader depending on root.currentPage
        sourceComponent: {
            switch(root.currentPage) {
              case "home":
                return homeComponent
              case "firstVal":
                return firstComponent
              case "secondVal":
                return secondComponent
              case "thirdVal"
                return thirdComponent
              default: return homeComponent
            }
        }
    }

    Component
    {
        id:homeComponent

        PageHome
        {
            id:home
            visible: true;
          
            //here we now change the root.currentPage to tell the loader what to load.
            //it would be nicer to use enums here but I dont want to make it too complicated.
            
            onSgnSetFirst():  // signal sgnSetFirst(val)
            {
              root.currentPage = "firstVal";
            }

            onSgnSetSecond(): // signal sgnSetSecond(val)
            {
              root.currentPage = "secondVal";
            }

            onSgnSetThird():  // signal sgnSetThird(val)
            {
              root.currentPage = "thirdVal";
            }
        }
    }
    

    Component
    {
        id:firstComponent

        PageFirst
        {
            id:firstPage
            visible: true;
        }
    }

    Component
    {
        id:secondComponent

        PageSecond
        {
            id:secondPage
            visible: true;
        }
    }
          
    Component
    {
        id:thirdComponent

        PageThird
        {
            id:thirdPage
            visible: true;
        }
    }
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.