QML按钮改变文本颜色

Question

我刚接触 QML，想个性化我的按钮。我成功地改变了背景颜色和边框颜色。但是我完全没成功地改变按钮文本的颜色。我看到我们不再使用“style”来改变样式，而是使用“background”，但我还不太理解。

谢谢您的帮助。

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

- Lazyos

---

您只需要打开文档或这个，然后进行定制即可。请注意，对内容进行修改时要保持原意，同时使其更通俗易懂。 - folibis

谢谢，这解决了我的问题。我在这份文档中多次查找，但没有找到正确的信息。但是文档中明确说明了。 - Lazyos

如果更改“contentItem”，则按钮将不再具有图标功能，这是一件麻烦的事情，因为如果您不需要图标，则需要创建另一个组件或实现状态... @folibis - ניר

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

- nAkhmedov

---

正如上面所提到的，如果您希望同时显示图标和文本，则这种方法行不通。 - mzimmers

Answer 2

我发现最快的两种方法是使用以下未记录的属性：

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

如果你希望在用户交互过程中进一步自定义文本颜色，可以查看按钮源代码中的三元运算符，并根据以下属性列表进行设置：

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

- emdou

---

在我看来，这是最佳答案。而且palette.buttonText并非完全没有文档支持：https://doc.qt.io/qt-6/qml-qtquick-palette.html - mzimmers

Qt的文档令人惊叹，永远不会停止。 - emdou

Answer 3

如果您正在使用QML样式，还有另一种方法。请将2.12替换为您的QML版本。

import QtQuick.Controls.Material 2.12    

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

这个按钮的文本将为红色，其他将遵循Material Style颜色。

要启用QML样式并添加Material主题，请在您的.pro文件中添加QT += quickcontrols2。

还需在main.cpp中添加#include <QQuickStyle>和QQuickStyle::setStyle("Material");

- Mohammad Rahimi

Answer 4

如果您只想更改文本颜色，最好在您的Button中使用html字体样式。这将保留其他Item，例如按钮图标：

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

- Crawl.W

---

太棒了！你真厉害！我一直在努力15分钟来设置ToggleButton/ToggleButtonStyle的颜色，你的方法起作用了 :) 谢谢 - intika

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，这样你就可以随意更改文本的颜色。

- Jiansoft