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

ApplicationWindow {
    id: window
    visible: true

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

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

// CustomButton.qml
import QtQuick 2.6
import QtQuick.Controls 2.1

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.6
import QtGraphicalEffects 1.0
import QtQuick.Controls 2.1
import QtQuick.Controls.Material 2.1

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