qml 多界面切换——qml

前言

无论用什么语言开发，稍微复杂点的界面，都会涉及到多界面切换。

之前用QtWidgets开发时，我曾写过一篇博客，现在我用qml开发移动端，觉得也有必要记录一下多界面切换这个知识点。

界面切换的几种方式

多界面切换根据不同的场合，可用不同的切换方式，当然，你非要只用一种方式也是可以的，这个都没规矩，你怎么方便怎么来。下面我列举我切换界面的方式和场合：

StackView push/pop Component

我感觉最常用的就是此类了，StackView像一个队列似的，将界面压（push）进去，不需要的弹(pop)出来。如果用这种方式，新界面被push进去，即显示新界面，旧界面还存在内存中，没有释放。这可以用在分级界面（主界面作为主控板，控制各级子界面的显示），你懂我的意思吧？此类切换方式，在界面切换时会有个动画，这个动画也是可以改变的。

下面给个例子进行说明：主界面作为StackView的初始化界面：

    Component{
        id:mainForm;
        MainForm{}
    }
    StackView {
        id: mystackview;
        anchors.fill: parent;
        initialItem: mainForm;
    }

当满足某些条件，展示子界面时，将子界面push进去，例：用户未登录 ，展示登录界面：

    Component{
        id:loginItem;
        LoginItem{}
    }

    function isShowLogin()
    {
            var flag=dataController.getLoginFlag();
            if(flag==0)
            {//账号登录
                mystackview.push(loginItem);
            }
     }

点击登录按钮时：

        MouseArea{
            anchors.fill: parent;
            onClicked: {
                var mobile=accountText.text;
                var password=wordText.text;
                dataController.accountLogin(mobile,password);

                mystackview.pop();
            }
        }

Loader加载Component

用加载器Loader实现界面的切换也是可以的，但是这种方式属于“狗熊掰棒子”，加载新的界面后，旧的就丢了。如果界面只有两级或者不需保存之前的界面数据，则可以用这种方式。这种方式就是替换Loader的sourceComponent达到界面切换的效果，这种方式是不带动画的。

    Loader{
        id:pagingLoader;
        anchors{ left: parent.left; top: titleBar.bottom; right: parent.right;
                bottom: parent.bottom;}
    }
    Component{
        id:webview;
        WebEngineItem{
            anchors.fill: parent;
        }
    }
    function loadWebView(name,url)
    {
        lab.text=name;
        pagingLoader.sourceComponent=webview;
        pagingLoader.item.url=url;
    }

显示或者隐藏

这种方式是最简单的，设置界面的显隐就可以了，也可设置界面的图层（z），从而达到想要的效果。

这个我就展示代码了，没什么必要。

结束语

写代码属于随心所欲，不必拘泥于条条框框，能够达到效果，想怎么实现随你喜欢！