自定义按钮继承（如 OOP 规则）

Question

我在 QML 中制作了自定义按钮，我希望它成为我项目中所有按钮的基础项。我想要的是从中派生（如在 OOP 中）按钮以更改功能。首先，每个派生按钮都应该有自己的 onClicked 响应。

这在 QML 中可行吗？如果可行，如何实现？

Answer 1

有可能。

这是我的 BaseButton 类型的示例。单击 BaseButton 时，它会发出自定义信号，在我的代码中是 sgnClicked.

BaseButton.qml

import QtQuick 2.0

Item {
    id:idButton
    signal sgnClicked()
    signal sgnClickMaintained()
    signal sgnEntered()
    signal sgnExited()
    signal sgnReleased()
    signal sgnPressed()
    signal sgnCanceled()
    property alias label: idText
    property alias text: idText.text
    property string iconSourceUp:""
    property string iconSourceDown:""
    property string iconSourceDisabled:""
    property alias backgroundWidth: background.width
    property alias backgroundHeight: background.height
    property alias backgroundRect: backgroundRect
    property alias hover: touchArea.enabled

    width: 100
    height: 20
    Text{
        id:idText
        //text: "Button"
        color:"white"
        anchors.centerIn: parent
        font.pointSize: 12
    }
    //if maintained at each 300 ms resend signal
    Timer{
        id:timer
        running: false
        repeat: true
        interval: 300
        onTriggered: sgnClickMaintained()
    }
    Image{
        id:background
        z: -1
        width: parent.width
        height: parent.height
        source:iconSourceUp
        visible: source.toString() !== ""
    }
    Gradient {
        id:idGradient
        GradientStop { position: 0 ; color: touchArea.pressed ? "#ccc" : "#eee" }
        GradientStop { position: 1 ; color: touchArea.pressed ? "#aaa" : "#ccc" }
    }
    Rectangle {
        id: backgroundRect
        width: parent.width
        height: parent.height
        border.color: "#888"
        color: enabled ?"":"lightgrey"
        radius: 4
        z: -1
        visible: !background.visible
        gradient: enabled ?idGradient:null
    }

    MouseArea{
        id: touchArea
        anchors.fill: parent
        hoverEnabled: true
        onCanceled: idButton.sgnCanceled()
        onClicked:
        {
            idButton.sgnClicked()
        }
        onEntered: idButton.sgnEntered()
        onExited: idButton.sgnExited()
        onPressAndHold: {
            timer.restart()
            idButton.sgnClickMaintained()
        }
        onReleased:{
            idButton.state = "up"
            timer.stop()
            idButton.sgnReleased()
        }
        onPressed:
        {
            idButton.state = "down"
            idButton.sgnPressed()
        }
    }
    onEnabledChanged: {
        if(enabled === false)
        {
            idButton.state = "disabled"
            timer.stop()
        }
        else{
            idButton.state = "up"
        }
    }

    states: [
        State {
            name: "down"
            PropertyChanges {
                target: background
                source: iconSourceDown
            }
        },
        State {
            name: "disabled"
            PropertyChanges {
                target: background
                source: iconSourceDisabled
            }
        },
        State {
            name: "up"
            PropertyChanges {
                target: background
                source: iconSourceUp
            }
        }
    ]

    Component.onCompleted:{
        if(enabled)
        {
            state = "up"
        }
        else
        {
            state = "disabled"
        }
    }
}

要创建一个继承自 BaseButton 的新按钮，您应该将 BaseButton 实例化为根项，并在插槽 onSgnClicked 中写入您希望按钮在单击时应执行的操作。

CustomButton.qml

import QtQuick 2.0

BaseButton {
    width: 100
    height: 50
    onSgnClicked: {
        //do something
    }
}

自定义按钮继承（如 OOP 规则）

Custom Button inheritance (like in OOP rules)

qt

qml

qtquick2

BaseButton.qml

CustomButton.qml