QtQuick如何实现类似母版页的效果?



  • 不一定是母版页,只是个叫法而已.
    比如:

    //MasterPage.qml
    import QtQuick 2.0
    
    Item {
        Item{
            id: header
            //这里是一致的
        }
        
        Item{
            id: content
            //这里是要继承实现的内容
        }
        
        Item{
            id: footer
            //这里也是一致的
        }
    }
    

    使用上面这个MasterPage.qml如何只实例化其中的content部分?

    import QtQuick 2.0
    
    MasterPage{
        //不造怎么写了?
    }
    


  • @taadis

    default property Component content;
    Loader{
    sourceComponent: content
    }



  • @taadis

    TabView



  • @MOMO 对了,需求就是这个



  • @qyvlik TabView不是像书签页那种么?好像需求不一样啊



  • @taadis 恩恩 我做过 有经验


  • 网站研运

    Loader不能满足要求么?Loader还是很好的,当然了,我自己也做过页面切换的类,自定义的控制性更好。



  • @taadis 我懂你的母版页是什么意思了。就是有固定的页头和页脚以及内容页。

    这个是很容易实现的。

    //~ Panel.qml
    Item {
        
        property alias headerHeight: headerLoader.height
        property alias footerHeight: footerLoader.height
        
        property Component headerComponent: null
        readonly property Item headerItem: headerLoader.item
        
        Loader {
            id: headerLoader
            width: parent.width
            height: 40
            sourceComponent: headerComponent
            Binding {
                target: headerLoader.item
                property: "anchors.fill"
                value: headerLoader
            }
        }
        
        property Component footerComponent: null
        readonly property Item footerItem: footerLoader.item
        
        Loader {
            id: footerLoader
            width: parent.width
            height: 40
            anchors.bottom: parent.bottom
            Binding {
                target: footerLoader.item
                property: "anchors.fill"
                value: footerLoader
            }
        }
        
        property Component contentComponent: null
        readonly property Item contentItem: contentLoader.item
        
        Loader {
            id: contentLoader
            width: parent.width
            anchors.top: headerLoader.bottom
            anchors.bottom: footerLoader.top;
            Binding {
                target: contentLoader.item
                property: "anchors.fill"
                value: contentLoader
            }
        }
    }
    

    使用:

    Panel {
        headerComponent: Rectangle {
            color: "black"
        }
        footerComponent: Rectangle {
            color: "black"
        }
        contentComponent: ListView {
            delegate: Rectangle { width: parent.width; height: 40; color: "green" }
           model: 10
        }
    }
    


  • @qyvlik 如果这样叫母版页的话,那也很容易实现。
    就是使用一个大的Item,里面用Item堆积一个页头和页脚,然后用Loader作为内容页。



  • @qyvlik 对的 就是这样



  • @jiangcaiyang123 嘿嘿,主要是不造用QML怎么写


登录后回复
 

与 萌梦社区 的连接断开,我们正在尝试重连,请耐心等待