Использование селекторов файлов с 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.13
import QtQuick.Controls 2.13

ApplicationWindow {
    id: window
    visible: true

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

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

// CustomButton.qml
import QtQuick 2.13
import QtQuick.Controls 2.13

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.13
import QtGraphicalEffects 1.13
import QtQuick.Controls 2.13
import QtQuick.Controls.Material 2.13

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