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

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

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

Следующий пример демонстрирует настраиваемую закруглённую кнопку, которая имеет стилизованную тень в стиле 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.15
import QtQuick.Controls 2.15

ApplicationWindow {
    id: window
    visible: true

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

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

// CustomButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15

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.15
import QtGraphicalEffects 1.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15

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