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

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

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

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

ApplicationWindow {
    id: window
    visible: true

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

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

// CustomButton.qml
import QtQuick
import QtQuick.Controls

Button {
    id: control

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

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

// +Material/CustomButton.qml
import QtQuick
import QtGraphicalEffects
import QtQuick.Controls
import QtQuick.Controls.Material

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