qml中使用combobox实现多级菜单_QML 实现多态

阅读本文大概需要3分钟

我们在C++中经常使用多继承的方式进行开发，那么到了QML这里，是否也可以使用多继承呢，答案是肯定的。

原理

QML中实现多态，主要是一些公共组件的继承和一些方法的重写，不像C++中那样，我们在派生类中重写某个虚函数时也可以调用基类的方法，在QML则不可以，这也是解释型语言的弱点吧，但是从迭代、高效率开发上来说已经很棒了。

小试牛刀

首先编写基类

比如这里以 baseMainFrame.qml为例，放置一个按钮，默认初始隐藏不显示

baseMainFrame.qml

import QtQuick 2.0
import QtQuick.Controls 1.4
Item {

    id: _baseMainFrame
    anchors.fill: parent;
    Button
    {
        id: m_btnTest
        visible: false;
        width: 40
        height: 20
        text: "text"
        onClicked: {
            console.log("clicked..")
        }
    }
    function updateInfo(){}
}

编写派生类

在派生类中，我们在它的构造函数中初始化基类按钮，让它显示出来

mainFrame.qml

import QtQuick 2.0

BaseMainFrame {
    id: mainframe

    width: parent.width
    height: parent.height

    Component.onCompleted: {
        m_btnTest.visible = true;
    }
}

调用

最后我们在Main.qml中来调用

Main.qml

import QtQuick 2.13
import QtQuick.Window 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("LQTest");
    MainFrame{
        anchors.fill: parent;
    }
}

效果

编写完成后直接运行该QML，意料之中基类成员不识别

也就是说，派生类中不能直接访问基类子对象。为了解决这个问题，我们可以在基类中给对应的子对象起别名。

property alias m_btnUpdate : m_btnTest;

基类完整代码如下

import QtQuick 2.0
import QtQuick.Controls 1.4

Item {
    id: _baseMainFrame
    anchors.fill: parent;
    property alias m_btnUpdate : m_btnTest;
    Button
    {
        id: m_btnTest
        visible: false;
        width: 40
        height: 20
        text: "text"
        onClicked: {
            console.log("clicked..")
        }
    }
    function updateInfo(){}
}

惊喜时刻，程序运行结果和自己预想的一致

其他

本次只演示了继承组件，其中基类中的某个方法也是可以继承和重写的。比如本次示例积累中的updateInfo() 方法也可以在派生类中重新实现。

总结

总结下，QML中使用多态进行继承时，注意在派生类中要访问基类的子对象时，不能直接通过子对象名访问，而要通过别名访问。