QML 按鈕更改文本顏色

Question

我是 QML 的新手，我想個性化我的按鈕。 我成功更改了背景顏色和邊框顏色。 但是我根本沒有成功更改按鈕文本的顏色。 我看到我們不再使用“風格”來改變風格，而是“背景”，我不了解它的一切。

謝謝你的幫助。

Button {
        id: buttonAC
        text: qsTr("AC")
        Layout.fillHeight: true
        Layout.fillWidth: true

        background: Rectangle {
            border.color: "#14191D"
            color: "#24292f"
            // I want to change text color next
        }

        /*Text {
            text: qsTr("AC")
            color: "#F54035"
        }*/
}

Answer 1

根據文檔

import QtQuick 2.6
import QtQuick.Controls 2.1

Button {
    id: control
    text: qsTr("Button")

    contentItem: Text {
        text: control.text
        font: control.font
        opacity: enabled ? 1.0 : 0.3
        color: control.down ? "#17a81a" : "#21be2b"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        opacity: enabled ? 1 : 0.3
        border.color: control.down ? "#17a81a" : "#21be2b"
        border.width: 1
        radius: 2
    }
}

Answer 2

我發現的兩種最快的方法是使用以下未記錄的屬性：

Button {
     ....
     palette.buttonText: "white"
}

要在用戶交互期間自定義文本顏色時更進一步，這里是 Button 源代碼中的三元組，后跟要相應設置的屬性列表：

color: control.checked || control.highlighted ? control.palette.brightText :
           control.flat && !control.down ? (control.visualFocus ? control.palette.highlight : control.palette.windowText) : control.palette.buttonText

屬性：

control.palette.brightText
control.palette.highlight
control.palette.windowText
control.palette.buttonText

第二個骯臟的黑客是使用 onCompleted 插槽，如下所示：

Button {
     id: control
     ....
     Component.onCompleted: {
          control.contentItem.color = "white";
     }
}

Answer 3

如果你只是想改變你的文字顏色，你可以在你的Button使用 html 字體樣式會更好。 這將保留其他Item如按鈕圖標：

Button
{
    //...
    text: "<font color='#fefefe'>" + moudle + "</font>"
    font.family: "Arial"
    font.pointSize: 24
    //...
}

Answer 4

如果您使用 QML 樣式，還有另一種方法。 將 2.12 替換為您的 QML 版本。

import QtQuick.Controls.Material 2.12    

Button {
    id: goToParenFolder
    text: "Hi"
    flat: true
    Material.foreground: "red"
}

此按鈕的文本將顯示為紅色，其他按鈕將遵循 Material Style 着色。

要啟用 QML 樣式並添加 Material 主題，請將QT += quickcontrols2添加到您的 .pro 文件中。

還要添加#include <QQuickStyle>和QQuickStyle::setStyle("Material"); 到 main.cpp

Answer 5

Button {
    id: control
    width: 290; height: 80
    opacity: down ? 0.6 : 1
    background: Rectangle {
        color: "#4DABFB"
        radius: 50
    }
    Text {
        id: controlText
        anchors.fill: parent
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        font.pixelSize: 30
        color: "#FFFFFF"
        text: "OK"
    }
}

我喜歡在Button內使用Text ，然后您可以根據需要更改 Text 的顏色。