精华内容
下载资源
问答
  • qml界面切换——qml

    2021-04-16 17:08:27
    之前用QtWidgets开发时,我曾写过一篇博客,现在我用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),从而达到想要的效果。

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

     

    结束语

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

    展开全文
  • qml 如何界面切换

    2014-08-19 12:14:28
    比如,首先显示Login.qml,当即登录按钮后,如何跳转到mainwindow.qml,用createComponent切换界面,会导致重复创建窗体。
  • 效果演示: ...second_share=0&share_from=copy 代码: main.qml---------------------------------------------------------------------------------...

    效果演示:

    https://v.qq.com/x/page/f0955dskgit.html?url_from=share&second_share=0&share_from=copy

    代码:

    main.qml---------------------------------------------------------------------------------------------------------------------------

    import QtQuick 2.12
    import QtQuick.Window 2.2
    import QtQuick.Controls 1.4
    
     
    Window {
    
     
        readonly property var pagesUrl: ["Mypage1.qml",
                                        "Page2.qml",
                                        "Page3.qml",
                                        "Page4.qml",
                                        "Page5.qml"]
        visible: true
        width: 640
        height: 480
        title: qsTr("StackViewTest")
    
     
        StackView
        {
            id:mystackview;
            width:640
            height: 400
            initialItem: page1
        }
    
     
        Row{
            id: statusBar
            height: 80
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.right: parent.right
            anchors.rightMargin: 10
            spacing: 10
            visible: true
    
     
            Button {
                id:btn1
                width:100
                height: 40
                anchors.left: parent.left
                anchors.leftMargin: 20
                text: qsTr("pageup")
                onClicked: {
                    pageRuning("pageup");
                }
            }
            Button {
                id:btn2
                width:100
                height: 40
                text: qsTr("pagehome")
                anchors.horizontalCenter: parent.horizontalCenter
                onClicked: {
                    pageRuning("pagehome");
                }
            }
            Button {
                width:100
                height: 40
                anchors.right: parent.right;
                anchors.rightMargin: 20
                text: "pagedown"
                onClicked: {
                    pageRuning("pagedown");
                }
            }
        }
    
     
        function pageRuning(cmd)
        {
            switch(cmd)
            {
            case "pageup":
                            if(mystackview.depth<5)
                            {
                                mystackview.push(Qt.resolvedUrl(pagesUrl[mystackview.depth]))
                            }
                break;
            case "pagedown":
                            if(mystackview.depth>0)
                             mystackview.pop();
                break;
            case "pagehome":
                            mystackview.pop(mystackview.initialItem);
                break;
            }
        }
    
     
    
     
        Component{
            id:page1
            Mypage1{}
        }
        Component{
            id:page2
            Page2{}
        }
        Component{
            id:page3
            Page3{}
        }
        Component{
            id:page4
            Page4{}
        }
        Component{
            id:page5
            Page5{}
        }
    }

     

     

    Mypage1.qml------------------------------------------------------------------

    import QtQuick 2.0
    
     
    Item {
        Rectangle
        {
            anchors.centerIn: parent
            Text {
                id: name
                text: qsTr("Im page 1")
            }
        }
    }
    Page2.qml-------------------------------
    import QtQuick 2.0
    
     
    Item {
        Rectangle
        {
            anchors.centerIn: parent
            Text {
                id: name
                text: qsTr("Im page 2")
            }
        }
    }
    ....Page3 Page4 Page5 都一样,只是显示的text不一样。  看手册pop(item)出栈操作如[abcdef],调用pop(a)就变成[a],测试中现象却不一样。
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 142
精华内容 56
关键字:

qml界面切换