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它应该看起来像常规按钮

创建具有原生外观的自定义QML按钮

1 个答案: