QT QML 如何只更改按钮样式的一个功能

Question

更改组件的样式，似乎替换了默认样式的所有功能。有没有办法只更改一个功能？

例如，假设我想要一个红色按钮；

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

ApplicationWindow
{
    visible: true
    width: 640
    height: 480

    Button
    {
        height: 200
        width: 200
        text: "Press me"
        style: ButtonStyle 
        {
            // changes background but also throws away everything else
            // in standard button style
            background: Rectangle { color: "red" }
        }
    }
}

使用 background 重新定义 ButtonStyle 可以很好地更改按钮的颜色，但系统默认 ButtonStyle 中的所有其他内容离开了。比如边框和点击高亮。

如何只更改一项功能并保留其余功能？

抱歉，如果之前有人问过这个问题。

谢谢，

更新

上面的问题是针对控件 1 的，但是控件 2 也存在同样的问题。下面是控件 2 的相同示例代码。

import QtQuick 2.7
import QtQuick.Controls 2.1

ApplicationWindow
{
    visible: true
    width: 640
    height: 480

    Button
    {
        height: 200
        width: 200
        text: "Press me"

        // changes background but also throws away everything else
        // in standard button style
        background: Rectangle { color: "red" }
    }
}

Answer 1

前言
QtQuick.Controls 1.4 的目的是提供具有原生外观 的控件。如果您想要更容易调整的控件，并且不需要原生外观，您应该考虑更新更快的QtQuick.Controls 2.0。

主要
你想要的是 - afaik - 不可能，因为默认样式由两个 Rectangles 和一个 Image 组成，其中 Image 似乎是最重要的。您可以在 mingw 包中的以下位置找到图像:

Qt\Qt5.7.0\5.7\mingw53_32\qml\QtQuick\Controls\Styles\Base\images

要访问控件的对象，您可以在此处找到它们:

    Button {
        id: but2
        x: 50
        onClicked: console.log(this.children[1].item.children[0].item.children[0], this.children[1].item.children[0].item.children[1], this.children[1].item.children[0].item.children[2])
    }

因此，我想到的最简单的解决方案是使用 Colorize

import QtQuick 2.0
import QtQuick.Window 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtGraphicalEffects 1.0
Window {
    width: 1024
    height: 800
    visible: true

    Button {
        id: but
        text: 'test'
    }
    Colorize {
        source: but
        anchors.fill: but

        // values from the documentation example.
        hue: 0.0
        saturation: 0.5
        lightness: -0.2
    }
}

或者更一般地说:要调整样式，请使用着色器。

QtQuick.Controls 2.0
还有另一种情况:背景 是 Rectangle 而不仅仅是 Component。但是如果你不自己分配一个，它只会在 Button 之后创建。

Button {
    id: but1
    background.color: 'red'
}

是不可能的，因为当您尝试分配颜色时背景没有实例化。
您可以使用 Component.onCompleted 处理程序来执行此操作:

Button {
    id: but1   
    Component.onCompleted: background.color = 'red'
}

但是当然，您会覆盖原始样式的 Binding，它会在 Button 按下 时处理颜色变化

Button {
    id: but1   
    Component.onCompleted: background.color = Qt.binding(function() { return (but1.pressed ? 'red' : 'green') }
}

将再次启用颜色更改，但您不会拥有原始颜色。您可以通过尝试来恢复原始颜色:

Button {
    id: but1
    onPressed: console.log(this.background.color)
    onReleased: console.log(this.background.color)
}

这将为您输出按下 的两种状态的颜色。但也许还有更多!所以最简单的解决方案是使用条件 Binding 如下:

Button {
    id: but1
}

Binding {
    when: but1.pressed
    target: but1
    property: 'background.color'
    value: 'red'
}