qml 多界面切换——qml

十年之少

已于 2023-12-20 10:05:36 修改

阅读量7.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： qml Qt for IOS开发文章标签： qml多界面切换

于 2021-04-19 10:07:42 首次发布

本文链接：https://blog.csdn.net/xiaopei_yan/article/details/115767617

qml 同时被 2 个专栏收录

17 篇文章

订阅专栏

Qt for IOS开发

16 篇文章

订阅专栏

本文介绍了使用QML进行多界面切换的三种方法：StackView的push/pop操作、Loader加载Component以及界面的显示与隐藏。每种方法适用于不同场景，并提供了具体示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

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

之前用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;
    }