Использование селекторов файлов с 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
        }
    }
}

Связанная информация

• QFileSelector
• QQmlFileSelector
• Стиль Qt Quick Controls