Roson讲Qt#19 修改Quick Controls2整体风格样式

你的名字 2022-09-10 15:29 170阅读 0赞

# 1.概述 #

Qt Quick Controls 2提供了几种样式供用户选择，不需要用户再去自定义每一个控件的样式，每一套样式都是针对所有控件而言的。

目前有3中样式：

*  Default Style：默认风格是一个简单和轻量级的全方位风格，为Qt Quick Controls 2提供了最大的性能。
 *  Material Style：Material Style基于谷歌Material design Guidelines提供了一个吸引人的设计，但是需要比Default Style更多的系统资源。
 *  Universal Style：通用风格提供了一个基于微软通用设计指南的吸引人的设计，但需要比默认风格更多的系统资源。

# 2.如何使用 #

## 2.1 .pro文件 ##

QT += quick quickcontrols2

## 2.2 main.cpp ##

#include <QGuiApplication>
    #include <QQmlApplicationEngine>
    #include <QtQuickControls2>
    
    int main(int argc, char *argv[])
    {
        QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
    
        QGuiApplication app(argc, argv);
    
        QQuickStyle::setStyle("Material");
    
        QQmlApplicationEngine engine;
        engine.load(QUrl(QStringLiteral("qrc:/main.qml")));
        if (engine.rootObjects().isEmpty())
            return -1;
    
        return app.exec();
    }

**注意：**

pro文件一定要加“quickcontrols2”，否则“\#include <QtQuickControls2>”会报错找不到头文件。

## 2.3 qml文件 ##

要使用Qt Quick Controls 2中的控件，需要导入如下模块

import QtQuick.Controls 2.2

# 3.三种风格展示 #

## 3.1 Default Style ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16][]

## 3.2 Material Style ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1][]

## 3.3 Universal Style ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 2][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/686629dfa7614f40bd651b8a1871db58.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/3f81f1b37198490399f436d950d2a69c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220829/f86f2cd96e0c49e6b18c2aa06c5e98c9.png