创建具有本机外观的自定义 QML 按钮

Question

我想通过定义我自己的 QML 类型来创建自定义 Button。这个Button 类型应该包含两个文本字段，一个是符号字体的单个字符，另一个是实际的按钮文本。

这很简单，但是如何使用为目标系统定义的本机颜色、渐变、字体和边框？

是否可以扩展Button 本身？以及如何在扩展 Button 时禁用设置图像的可能性？

import QtQuick 2.5

Rectangle {
    id:anyButton

    property string image:"\ue43f"
    property string text:"Button"

    border.color : "black"
    border.width: 1
    radius: 5

    Gradient {
        id: lightGradient
        GradientStop { position: 0.0; color: anyButton.color }
        GradientStop { position: 1.0; color: Qt.darker(anyButton.color,1.5) }
    }

    Gradient {
        id: darkGradient
        GradientStop { position: 0.0; color: Qt.darker(anyButton.color,1.7) }
        GradientStop { position: 1.0; color: Qt.darker(anyButton.color,1.7) }
    }

    Rectangle{
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter

        Text{
            id:buttonImage
        }
        Text{
            id: buttonLabel
            font.pixelSize:20
            text: anyButton.text
        }
    }

    signal buttonClick()

    MouseArea{
        id: buttonMouseArea
        anchors.fill: parent
        onClicked: parent.buttonClick()
        hoverEnabled: true

        onEntered:{
            parent.border.width= 2
        }

        onCanceled:{
            parent.border.width= 1
        }

        onExited: {
            parent.border.width= 1
        }
    }
    gradient: buttonMouseArea.pressed ? darkGradient : lightGradient
}

Answer 1

在 QML 中创建具有自定义样式、文本等的按钮非常简单。 使用ButtonStyle，您可以根据需要定义自定义background 和label。要获取系统颜色，请使用SystemPalette。 Here你可以找到它的真实控件应用。

例如：

Button {
    anchors.centerIn: parent
    property string firstfield: "a"
    property string secondfield: "sometext"
    iconSource: "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
    text: firstfield + " " + secondfield
    style: ButtonStyle {
        background: Rectangle {
            id: bg
            border.width: 1
            border.color: palette.mid
            radius: 3
            gradient: Gradient {
                GradientStop { position: 0.0; color: control.pressed ? palette.button : palette.light }
                GradientStop { position: 0.5; color: palette.midlight }
                GradientStop { position: 1.0; color: control.pressed ? palette.light : palette.button }
            }
        }
        label: RowLayout {
            id: row
            spacing: 5
            Image { source: control.iconSource }
            Label {text: control.firstfield; font.family: "Symbol"; font.pixelSize: 18; color: palette.buttonText}
            Label {text: control.secondfield; color: palette.buttonText}

        }
    }
}

SystemPalette { id: palette; colorGroup: SystemPalette.Active }

当然，您可以添加阴影等。如果您放弃ButtonStyle，它应该看起来像一个常规按钮