qt - 如何在不丢失 qml 中的复选标记的情况下自定义复选框颜色？

Question

如何在不更改默认情况下显示的复选标记的情况下自定义指标的复选框颜色？
我将说明默认情况下会发生什么:

import QtQuick 2.0
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 300
    CheckBox {

    }

}

如果我去文档，我看到的例子不会保留复选标记......
https://doc.qt.io/qt-5.9/qtquickcontrols2-customize.html
因此，我在指标属性上使用了 Text 组件，而不是 Rectangle

import QtQuick 2.0
import QtQuick.Controls 2.2

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 300
    CheckBox {
        id: control
        indicator: Rectangle {
            implicitWidth: 26
            implicitHeight: 26
            x: control.leftPadding
            y: parent.height / 2 - height / 2
            radius: 3
            border.color: control.down ? "#17a81a" : "#21be2b"

            Text {
                width: 14
                height: 14
                x: 1
                y: -2
                text: "✔"
                font.pointSize: 18
                color: control.down ? "#17a81a" : "#21be2b"
                visible: control.checked
            }
        }
    }

}

它看起来不像默认的:

有什么我们可以做的让它像默认的一样吗？

Answer 1

一个蛮力解决方案是复制 CheckBox.qml 的实现到您自己的代码，然后更改所需的部分。事实证明，复选符号不是文本，而是一个简单的图像。

以下将为您提供与 CheckBox.qml 相同的 CheckBox ，但有一个绿色的检查符号而不是黑色的作品。我从 Qt 5.13 复制了这段代码。

import QtQuick 2.12
import QtQuick.Templates 2.12 as T
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12

ApplicationWindow {
    id: window
    title: "Stack"
    visible: true
    width: 300
    CheckBox {
        id: control
        indicator: Rectangle {
        implicitWidth: 28
        implicitHeight: 28

        x: control.mirrored ? control.leftPadding : control.width - width - control.rightPadding
        y: control.topPadding + (control.availableHeight - height) / 2

        color: control.down ? control.palette.light : control.palette.base
        border.width: control.visualFocus ? 2 : 1
        border.color: control.visualFocus ? control.palette.highlight : control.palette.mid

        ColorImage {
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            defaultColor: "#353637"
            color: "green" // Added this
            source: "qrc:/qt-project.org/imports/QtQuick/Controls.2/images/check.png"
            visible: control.checkState === Qt.Checked
        }
        Rectangle {
            x: (parent.width - width) / 2
            y: (parent.height - height) / 2
            width: 16
            height: 3
            color: control.palette.text
            visible: control.checkState === Qt.PartiallyChecked
        }
    }
    }

} 

我想，没有办法覆盖 ColorImage 组件的一部分，因为没有 id正在设置，因此无法重新定义颜色属性。