qml use Material theme (Styling Qt Quick Controls 2)

Qt Quick provides a great degree of freedom for developers, and that for some controls traditional style of the project, there is no similar skin and things like that can improve development efficiency rather than having each control their own DIY it? The answer is

Styling Qt Quick Controls 2

Qt Quick Controls2 offered several alternative style

Default Style (default style)

The default style is a simple, lightweight style that is reflected in all aspects of control. The benefit is the ability to maximize the performance of your App

 

Fusion Style (fusion of style)

Fusion style is a platform-independent style, which provides desktop-oriented appearance of Qt Quick Control.

Imagine Style (texture style)

Imaging style is based on the realization of image resources. This style provides a default set of images, but to provide a directory with maps by using a predefined naming convention, you can easily change the map style.

Material Style (Google Materials style)

Material styles according to Google presented Material Design design rules, provides a beautifully seductive style program interface

Universal Style (Microsoft Universal style)

Universal style according to Microsoft's proposed Universal Design design rules, provides a beautifully seductive style interface program.

 

Material configuration interface style

       A method for configuring the application interface style is the C ++ source file main.cpp by QQuickStyle static method setStyle be provided, such as the following code to set the style Material Design App

QQuickStyle::setStyle("Material");

Another way to configure the program interface style is to use the configuration file qtquickcontrols2.conf

This configuration file will eventually be as a resource file that is compiled into the program among the following configuration code specifies the target program using Material Design rules, and the theme of light. To make the configuration file to take effect, the file must be compiled into the application, the resource file as a program

[Controls]
Style=Universal

[Material]
Theme=Light
Accent=Teal
Primary=BlueGrey

This profile is similar to Qss file Qt Style Sheets in, set the global style controls, when a control needs to be set separately, in qml file, you need to import QtQuick.Controls.Material 2.0, a single set of controls

    CheckBox {
        Material.theme: Material.Light
        Material.accent: Material.Purple
        id: checkBox
        x: 187
        y: 26
        text: qsTr("Check Box")
    }

Its additional properties are:

1.  Accent , Color Type, represent key color, default is Material.Pink

2.  Primary , Color type, preferably represents a color, default  Material.Indigo

3.  backbround , Color Type, represent the background color, the default specified (light or dark) by the subject

4.  Elevation , int type, indicates the altitude, the greater the value, the darker the shading, the value associated with the particular control

5. The  foreground , Color type representing foreground color, theme specified by a default value (light or Dark)

6.  Theme , enumerated types, represents a theme, the default is Material.Light , it can also be modified to Material.Dark

Predefined color of the material

Key color and preferred color may be any color, it is recommended to use one kind of pre-defined color, this color can be well used in conjunction with other materials style palette:

Available predefined color table: