如何将重复QML矩形按钮封装为可复用组件？

问题描述 #

我在矩形中实现了一些模拟按钮，需要在应用的多个位置使用这些按钮，请问能否将其封装为可复用组件？

当前实现代码如下：

RowLayout {
    anchors.fill: parent

    Rectangle {
        id: button1
        height: _buttonsHeight * 0.6
        width: height
        radius: height / 2
        border.width: 1
        border.color: "black"

        Image {
            anchors.centerIn: parent
            source: "image://iconProvider/icons/128/button1.png"
            sourceSize.height: parent.height * 0.8
        }

        MouseArea {
            anchors.fill: parent
            onPressed: btnHome.border.width = 2
            onReleased: btnHome.border.width = 0
            onClicked: userInputDevice.buttonClicked("button1")
        }
    }

    Rectangle {
        id: button2
        height: _buttonsHeight * 0.6
        width: height
        radius: height / 2
        border.width: 1
        border.color: "black"

        Image {
            anchors.centerIn: parent
            source: "image://iconProvider/icons/128/button2.png"
            sourceSize.height: parent.height * 0.8
        }

        MouseArea {
            anchors.fill: parent
            onPressed: btnHome.border.width = 2
            onReleased: btnHome.border.width = 0
            onClicked: userInputDevice.buttonClicked("button2")
        }
    }
}

期望的简化调用方式如下：

RowLayout {
    anchors.fill: parent
    Button {id = "button1", height = _buttonsHeight * 0.6, icon = "button1.png", command = "button1", parent = this}
    Button {id = "button2", height = _buttonsHeight * 0.6, icon = "button2.png", command = "button2", parent = this}
}

请问这种实现方式是否可行？

可行，具体实现方案如下 #

完全可以把这些重复的按钮逻辑封装成可复用的QML组件，只需按以下步骤操作：

1. 创建可复用Button组件 #

新建一个Button.qml文件，将通用的按钮逻辑抽离出来，通过自定义属性接收外部传入的参数：

// Button.qml
Rectangle {
    // 自定义属性，接收外部传入的参数
    property string iconName: ""
    property string command: ""
    property real buttonHeight: 48 // 默认高度，可外部覆盖

    width: buttonHeight
    radius: buttonHeight / 2
    border.width: 1
    border.color: "black"

    Image {
        anchors.centerIn: parent
        source: "image://iconProvider/icons/128/" + iconName
        sourceSize.height: parent.height * 0.8
    }

    MouseArea {
        anchors.fill: parent
        onPressed: parent.border.width = 2
        onReleased: parent.border.width = 1 // 修正原代码中硬编码id的问题，改为引用当前按钮
        onClicked: userInputDevice.buttonClicked(command)
    }
}

2. 在主组件中调用封装好的Button #

注意QML的属性语法是property: value而非=，调整后的调用代码如下：

RowLayout {
    anchors.fill: parent

    Button {
        id: button1
        buttonHeight: _buttonsHeight * 0.6
        iconName: "button1.png"
        command: "button1"
    }

    Button {
        id: button2
        buttonHeight: _buttonsHeight * 0.6
        iconName: "button2.png"
        command: "button2"
    }
}

关键说明 #

• 原代码中onPressed/onReleased里的btnHome属于硬编码id，组件中改为parent避免了依赖外部id的问题
• 自定义属性可设置默认值，外部使用时按需覆盖即可
• 组件封装完成后，任何需要该按钮的位置直接引入Button.qml即可重复使用，大幅减少代码冗余

内容的提问来源于stack exchange，提问作者user2377283