Использование селекторов файлов с Qt Quick Controls 2

Селекторы файлов предоставляют удобный способ выбора вариантов файлов. Qt предлагает встроенные селекторы на основе имени платформы и языка. Qt Quick Controls 2 расширяет встроенные селекторы именем (в нижнем регистре) стиля, с которым работает приложение.

Используя селекторы файлов, можно применять специфичные для стиля изменения без создания жёсткой зависимости от стиля. Из доступных вариантов файлов QML-движок загружает только выбранный QML-файл. Каждый вариант файла может предполагать контекст, то есть определённый стиль. Это обычно приводит к некоторому дублированию кода, но с другой стороны, устраняет упомянутую жёсткую зависимость от стиля и приводит к более простому и эффективному коду QML. Такой же метод используется для реализации стилей Qt Quick Controls 2.

Следующий пример демонстрирует пользовательскую кнопку с закругленными углами, которая имеет стилизованную тень в стиле Material и выглядит плоской в других стилях. Файлы организованы так, что версия Material для CustomButton.qml расположена в подкаталоге +material.

:/main.qml
:/CustomButton.qml
:/+material/CustomButton.qml

По умолчанию main.qml будет использовать CustomButton.qml для типа CustomButton. Однако, когда приложение запускается со стилем Material, селектор material будет присутствовать, и вместо него будет использована версия +material/CustomButton.qml.

// main.qml
import QtQuick 2.12
import QtQuick.Controls 2.12

ApplicationWindow {
    id: window
    visible: true

    CustomButton {
        text: "Button"
        anchors.centerIn: parent
    }
}

Основная реализация пользовательской кнопки — это простая плоская кнопка с закругленными углами.

// CustomButton.qml
import QtQuick 2.12
import QtQuick.Controls 2.12

Button {
    id: control

    background: Rectangle {
        radius: width / 2
        implicitWidth: 36
        implicitHeight: 36
        color: control.pressed ? "#ccc" : "#eee"
    }
}

Реализация пользовательской кнопки в стиле Material импортирует стиль Material, запрашивает тёмную тему для получения светлого текста и создаёт тень для фона.

// +material/CustomButton.qml
import QtQuick 2.12
import QtGraphicalEffects 1.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12

Button {
    id: control

    Material.theme: Material.Dark

    background: Rectangle {
        implicitWidth: 48
        implicitHeight: 48
        color: Material.accentColor
        radius: width / 2

        layer.enabled: control.enabled
        layer.effect: DropShadow {
            verticalOffset: 1
            color: Material.dropShadowColor
            samples: control.pressed ? 20 : 10
            spread: 0.5
        }
    }
}

Примечание: Рекомендуется использовать QQmlApplicationEngine, который внутренне создаёт экземпляр QQmlFileSelector. Этого достаточно для использования селекторов QML-файлов.

Связанная информация

• QFileSelector
• QQmlFileSelector
• Стиль Qt Quick Controls 2