使用 material 设计为按钮添加背景和字体颜色

Question

我正在尝试在 Qt 上设计一个带有 material 设计的登录表单，它应该看起来像这样：

但是我不知道如何在 QML 中为按钮添加颜色并更改按钮文本的字体颜色。这是我到目前为止得到的：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

Item {
    property alias login: login

    Pane {
        id: pane
        x: 144
        y: 117
        width: 353
        height: 246
        clip: false
        font.strikeout: false
        background: Rectangle {
                color: "#ffffff"
            }

        ColumnLayout {
            id: columnLayout
            x: 139
            y: -158
            anchors.fill: parent

            TextField {
                id: username
                Layout.fillWidth: true
                placeholderText: qsTr("Username")
            }

            TextField {
                id: password
                Layout.fillWidth: true
                placeholderText: qsTr("Password")
            }

            Button {
                id: login
                text: qsTr("Login")
                spacing: -2
                font.capitalization: Font.MixedCase
                Layout.fillWidth: true
                highlighted: false
//                background: Rectangle {
//                            implicitWidth: 100
//                            implicitHeight: 40
//                            color: button.down ? "#d6d6d6" : "#f6f6f6"
//                            border.color: "#26282a"
//                            border.width: 1
//                            radius: 4

//                        }

            }
        }
    }
}

如您所见（在注释代码中）我尝试使用 Rectangle 和 background 属性添加颜色，但这会删除按钮功能，例如阴影，highlight、单击时变暗等。有没有简单的方法可以做到这一点？

这里是我的代码的输出供参考：

Answer 1

为了给 Material 控件设置主题，您必须使用 Material attached properties

在你的情况下你想使用 Material.background :

import QtQuick.Controls.Material 2.2
// ...
Button {
    id: login
    text: qsTr("Login")
    Layout.fillWidth: true
    Material.background: Material.Indigo
    Material.foreground: "white"
}

请注意，根据 material guidelines.

，按钮的文本应为大写

Answer 2

如果你想要一个符合Google材料设计指南的设计，最简单的方法就是使用

QtQuick.Controls.Materials

要使用它们，只需使用描述的任何方法 here 即可在您的应用程序中激活它们。要尝试一下，我建议使用 命令行参数 。只需使用

启动您的应用程序

-style material

如果你想在你的代码中修复它，把它放在 main.cpp:

QQuickStyle::setStyle("Material");

请注意，-style 选项与 here for widgets and desktop os styles 定义的选项完全相同。尽管有这种快速样式和小部件样式 完全不同的东西 并且您不能将前者应用于后者，反之亦然。小部件

如果您现在已经在使用 Material 风格，但并不蔑视它并希望更改选定控件的某些定义，您可以导入

import QtQuick.Controls.Materials 2.x

您需要调整 x 以适应安装的最新版本。 0 是 Qt5.7

的正确选择

然后你可以改变特定的方面，比如

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0

ApplicationWindow {
    id: mainWindow
    width: 800
    height: 600
    visible: true

    Button {
        id: login
        text: qsTr("LOGIN")
        Material.background: Material.Orange // Change the background
    }
}

如果您不想使用 Material 并且只想更改控件的特定颜色，您需要了解为什么这不是那么容易做到，又不会搞砸。

I tried to add colour using Rectangle with the background property but this removes the button features like shadow, highlight, darken on click and so on. Is there a simple way to accomplish this?

您不能只更改 background 的颜色，因为没有颜色。有多种颜色适用于不同的状态。表达式可能如下所示：

color: (control.down ? 'darkgrey' : 'lightgrey')

因此，如果您像这样将 color 更改为 orange：

color: 'orange'

你搞砸了，因为现在不再考虑另一个状态。

此外，当然，你不能从一开始就改变 background 的颜色，比如 background.color: 'green'，因为 QML 不知道属性 background.color.它期望那里有一个 Item，它没有 color 并且 Rectangle 只是稍后创建的。所以你需要做的是

注意不要覆盖状态
等待属性可用

example.qml

Button {
    id: login
    text: qsTr("LOGIN")

    Binding {
        target: login
        property: "background.color"
        value: 'red'
        when: !login.pressed // Here comes the state
    }
}

Answer 3

您可以简单地 highlight a Button 使按钮以独立于样式的方式为其背景着色。 Material 样式用强调色填充背景并使文本变亮：

Button {
    text: qsTr("Login")
    highlighted: true
}

突出显示的 Button 比自定义按钮更有效。定制应该只在必要时进行。这只是一个视觉亮点。可以有多个突出显示的按钮。突出显示 Button 不会影响焦点。

使用 material 设计为按钮添加背景和字体颜色

Add background and font colour to a button with material design

qt

qml

qtquick2

qtquickcontrols2