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

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

Используя селекторы файлов, можно применять стилизованные изменения без создания жёсткой зависимости от стиля. Из доступных вариантов файлов 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