QT QML如何仅更改按钮样式的一个功能 [英] QT QML how to change only one feature of a, say, button style

问题描述

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

changing the style of a component, seems to replace all the features of the default style. is there a way to change only one feature?

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

For example, suppose i want a red button;

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 中的其他所有内容离开了.例如边框和点击高亮.

re-defining ButtonStyle with a background works fine for changing the color of the button, but then everything else within the system default ButtonStyle is gone. For example, the border and the click highlight.

如何只更改一项功能而保留其余功能?

How to just change one feature and keep the rest?

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

Sorry if this has been asked before.

谢谢，

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

The above question was for Controls 1, but the same problem exists for Controls 2. Here's the same example code for Controls 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" }
    }
}

推荐答案

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

Preface
The purpose of QtQuick.Controls 1.4 was, to offer controls with native look and feel. If you want to have easier adjustable controls, and don't need the native look, you should consider the newer and faster QtQuick.Controls 2.0.

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

Main
What you desire is - afaik - impossible, as the default style consists out of two Rectangles and one Image where the Image seems to be the most important. You can find the images in the mingw-package at this location:

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

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

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

To access the objects of the control, you find them here:

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

所以，我想到的最简单的解决方案是使用 着色

So, the easiest solution, to pop into my mind is to use 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
    }
}

或者更笼统地说:要调整样式，请使用着色器.

Or to be more general: To just adjust the styling, go for shaders.

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

QtQuick.Controls 2.0
There you have another case: the background is a Rectangle not just the Component. But if you do not assign one your self, it is only created after the Button.

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

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

is impossible, as the background is not instantiated when you try to assign the color.
You could use the Component.onCompleted handler to do this:

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

但是当然你会覆盖原始样式的 Binding，它在 Button 被 按下>

But of course you overwrite the Binding of the original style, that handles the color-change while the Button is beeing pressed

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

将再次启用颜色更改，但您将没有原始颜色.您可以通过尝试检索原始颜色:

would enable the color-change again, but you won't have the original color. You might retrive the orignal color by trying it out:

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

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

This will output you the colors of the two states for pressed. But maybe there are more! So the easiest solution is to use a conditional Binding as this:

Button {
    id: but1
}

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

这篇关于QT QML如何仅更改按钮样式的一个功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！