更新

Question

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

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

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

使用ButtonStyle重新定义background可以正常更改按钮的颜色，但系统默认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 -package中找到图像：

Qt的\ Qt5.7.0 \ 5.7 \ mingw53_32 \ QML \ QtQuick \控制\样式\基地\图像

要访问控件的对象，请在此处找到它们：

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
您还有另一种情况：background 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) }

这将输出pressed的两种状态的颜色。但也许还有更多！因此，最简单的解决方案是使用条件Binding：

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

Answer 2

从Control派生的所有QC2类型都有一个称为palette的成员。（请参阅here）出于某种原因，他们在描述如何自定义不同控件时并未在文档中提及。但是您可以查看源代码，以查看需要为对象修改哪些调色板颜色。例如，要将Button的背景更改为红色，只需执行以下操作：

Button
{
    id: btn1
    palette.button: "red"
}

您可以通过更改ApplicationWindow中的调色板来更改应用程序中的所有按钮，如下所示：

ApplicationWindow
{
    id: mainWin

    // Change default button background to be red
    palette.button: "red"

    Button
    {
        id: btn1
        // Background will be red
    }

    Button
    {
        id: btn2

        // You can of course override the default 
        palette.button: "green"
    }
}

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

更新

2 个答案: