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

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

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

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

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

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

// main.qml
import QtQuick 2.14
import QtQuick.Controls 2.14

ApplicationWindow {
    id: window
    visible: true

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

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

// CustomButton.qml
import QtQuick 2.14
import QtQuick.Controls 2.14

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.14
import QtGraphicalEffects 1.14
import QtQuick.Controls 2.14
import QtQuick.Controls.Material 2.14

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