如何创建可重用的按钮组件

Question

我在一个矩形中有一些模拟按钮。我需要在应用程序的不同位置使用这些按钮。是否可以用它制作一种组件？

目前情况是这样的：

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}
}

这样的事情可行吗？

Answer 1

您应该阅读有关 QML 定义类型的文档。

不要使用赋值运算符，而是使用冒号来创建绑定。无需设置任何父级。

对于嵌套的

Image.source

属性，您应该在组件的根目录中创建一个别名属性，如下所示

property alias imageSource: <imageID>.source

以便能够从外部设置它。

import QtQuick
import QtQuick.Layouts

Window {
    id: root
    width: 320
    height: 240
    visible: true

    property int btnHeight: 80

    component CustomButton : Rectangle {
        property alias icon: image.source
        signal pressed
        signal released
        signal clicked

        id: buttonRoot
        height: 20
        width: height
        radius: height / 2
        border.width: 1
        border.color: "black"

        Image {
            id: image
            anchors.centerIn: parent
            source: "https://upload.wikimedia.org/wikipedia/commons/7/72/Variable_Resistor.svg"
            fillMode: Image.PreserveAspectFit
            width: buttonRoot.height / Math.sqrt(2)
            height: image.width
        }

        MouseArea {
            anchors.fill: parent
            onPressed: buttonRoot.pressed()
            onReleased: buttonRoot.released()
            onClicked: buttonRoot.clicked()
        }
    }

    RowLayout {
        anchors.centerIn: parent
        spacing: 20

        CustomButton {
            id: button1
            height: root.btnHeight
            onClicked: console.log("Button 1 clicked")
        }
        CustomButton {
            id: button2
            height: root.btnHeight
            icon: "https://upload.wikimedia.org/wikipedia/commons/f/fd/Crystal_Clear_app_download_manager.svg"
            onClicked: console.log("Button 2 clicked")
        }
    }
}

Answer 2

您可以创建一个新的 qml 文件，我们将其命名为 MyButton.qml

MyButton 是一个带有图标和文本的自定义按钮，您可以更改它以满足您的需求。

我的按钮.qml：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import Qt.labs.platform 1.0
import QtLocation 5.12
import QtQuick.Controls.Material 2.15


MouseArea {
    id: control
    width: control.w
    height: control.h
    property string icon_btn
    property bool icon_visible: true
    property string text
    property int border: 3
    property string borderColor: "white"
    property string colorr: "#222222"
    property int w: 50
    property int h: 50
    property bool text_visible: true
    property bool clicked: false
    property int radius: 12
    property int contentLeftMargin: 0
    property string buttonColor: enabled ? control.colorr : "grey"

    cursorShape: Qt.PointingHandCursor

    Rectangle {
        border.color: control.borderColor
        border.width: control.border
        radius: control.radius
        anchors.fill: parent
        color: control.buttonColor

        RowLayout{
            anchors.fill: parent

            Item { Layout.fillWidth: true }
            Image{
                id: img
                visible: control.icon_visible
                source: control.icon_btn
                Layout.preferredWidth: 35
                Layout.preferredHeight: 35
                //Layout.leftMargin: control.contentLeftMargin
            }
            Text{
                id: txt
                text: control.text
                font.pointSize: 17
                font.bold: true
                color: "white"
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                visible: control.text_visible ? x + width + 15 < control.width : 0
                //Layout.leftMargin: control.contentLeftMargin
            }
            Item { Layout.fillWidth: true }
        }
    }
    Layout.bottomMargin: 10
}

然后在你的主 qml 文件中使用它。

例如：

Window {

    MyButton{
        id: btn_refresh
        icon_btn: "qrc:/Icons/outline_refresh_white_48pt_3x.png"
        
        onClicked: {
            //do something on click
        }
    }
}