【qml】使用Material风格对qml控件进行美化

使用Material风格对qml控件进行美化

首先需要在qmake/cmake中添加模块

qmake：

QT += quickcontrols2

cmake:

find_package(Qt${QT_VERSION_MAJOR} REQUIRED COMPONENTS QuickControls2)

target_link_libraries(material Qt${QT_VERSION_MAJOR}::QuickControls2)

在main.cpp中设置Material风格

#include <QQuickStyle>
 QQuickStyle::setStyle("Material");

对Material风格进行更改

Material样式允许自定义五个属性

• theme: 主题颜色
  Material.LightLight theme (default)
  Material.DarkDark theme
  Material.SystemSystem theme
• primary:ToorBar的颜色
• accent:高亮颜色
• foreground:前景颜色(color)
• backgound:背景颜色

Material.elevation : int：控件高度（控件阴影深度）

示例

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
ApplicationWindow {
    id:window
    width: 640
    height: 480
    visible: true
    Material.primary : Material.Red
    Material.accent: Material.Green
    title: qsTr("Hello World")
    ToolBar{
        height: 40
        id:toolbar
        anchors.left: parent.left
        anchors.right: parent.right
        Material.elevation:6
        ToolButton{
        text: qsTr("Material")
        }
    }
    Flow
    {
        anchors.top : toolbar.bottom
        anchors.left: parent.left
        anchors.right: parent.right;
        Button{
            checkable: true
            highlighted: true
            onCheckedChanged:
            {
                if(checked)
                {
                    highlighted = false
                }
                else
                {
                    highlighted = true
                }
            }
        }
        Switch{
        Material.background: Material.Teal
        }
        ComboBox{}
        CheckBox{}
        Slider{}
        SpinBox{}
        SplitView{}
        MenuBar
        {
            Material.background: Material.Green
            width: 200
            height: 40
        }

    }
}