Тип QML SplitView

Выравнивает элементы с перетаскиваемым разделителем между каждым элементом. Подробнее...

• Список всех членов, включая унаследованные

Свойства

• handle : Компонент
• orientation : перечисление
• resizing : bool

Присоединенные свойства

• fillHeight : bool
• fillWidth : bool
• maximumHeight : вещественное
• maximumWidth : вещественное
• minimumHeight : вещественное
• minimumWidth : вещественное
• preferredHeight : вещественное
• preferredWidth : вещественное
• view : SplitView

Методы

• bool restoreState(state)
• var saveState()

Подробное описание

SplitView — это элемент управления, выравнивающий элементы по горизонтали или вертикали с перетаскиваемым разделителем между каждым элементом.

SplitView поддерживает следующие присоединенные свойства для управляемых им элементов:

• SplitView.minimumWidth
• SplitView.minimumHeight
• SplitView.preferredWidth
• SplitView.preferredHeight
• SplitView.maximumWidth
• SplitView.maximumHeight
• SplitView.fillWidth (true для единственного дочернего элемента)
• SplitView.fillHeight (true для единственного дочернего элемента)

Кроме того, каждый разделитель имеет следующие только для чтения присоединенные свойства:

• SplitHandle.hovered
• SplitHandle.pressed

Предпочтительный размер элементов в SplitView можно указать с помощью implicitWidth и implicitHeight или SplitView.preferredWidth и SplitView.preferredHeight.

SplitView {
    anchors.fill: parent

    Item {
        SplitView.preferredWidth: 50
    }

    // ...
}

Для горизонтального SplitView не обязательно указывать предпочтительную высоту каждого элемента, так как они будут изменены на высоту представления. Это относится и к вертикальным представлениям.

При перетаскивании разделителя SplitView.preferredWidth или SplitView.preferredHeight свойство перезаписывается в зависимости от orientation представления.

Для ограничения размера элементов в горизонтальном представлении используйте следующие свойства:

SplitView {
    anchors.fill: parent

    Item {
        SplitView.minimumWidth: 25
        SplitView.preferredWidth: 50
        SplitView.maximumWidth: 100
    }

    // ...
}

Для ограничения размера элементов в вертикальном представлении используйте следующие свойства:

SplitView {
    anchors.fill: parent
    orientation: Qt.Vertical

    Item {
        SplitView.minimumHeight: 25
        SplitView.preferredHeight: 50
        SplitView.maximumHeight: 100
    }

    // ...
}

Всегда будет один элемент (элемент fill) в SplitView, у которого SplitView.fillWidth установлено в true (или SplitView.fillHeight, если orientation — Qt.Vertical). Это означает, что элемент получит все оставшееся пространство после размещения других элементов. По умолчанию это последнее видимое дочернее окно SplitView, но его можно изменить, явно установив fillWidth в true для другого элемента.

Разделитель может относиться к элементу слева/сверху или справа/снизу:

• Если элемент fill находится справа, разделитель принадлежит элементу слева.
• Если элемент fill находится слева, разделитель принадлежит элементу справа.

Для создания SplitView с тремя элементами и предоставления центральному элементу излишнего пространства можно сделать следующее:

SplitView {
    anchors.fill: parent
    orientation: Qt.Horizontal

    Rectangle {
        implicitWidth: 200
        SplitView.maximumWidth: 400
        color: "lightblue"
        Label {
            text: "View 1"
            anchors.centerIn: parent
        }
    }
    Rectangle {
        id: centerItem
        SplitView.minimumWidth: 50
        SplitView.fillWidth: true
        color: "lightgray"
        Label {
            text: "View 2"
            anchors.centerIn: parent
        }
    }
    Rectangle {
        implicitWidth: 200
        color: "lightgreen"
        Label {
            text: "View 3"
            anchors.centerIn: parent
        }
    }
}

Сериализация состояния SplitView

Основное назначение SplitView — позволить пользователям легко настраивать размер различных элементов интерфейса. Кроме того, предпочтительные размеры пользователей должны сохраняться между сеансами. Для этого значения свойств SplitView.preferredWidth и SplitView.preferredHeight можно сериализовать с помощью функций saveState() и restoreState():

import QtQuick.Controls
import Qt.labs.settings

ApplicationWindow {
    // ...

    Component.onCompleted: splitView.restoreState(settings.splitView)
    Component.onDestruction: settings.splitView = splitView.saveState()

    Settings {
        id: settings
        property var splitView
    }

    SplitView {
        id: splitView
        // ...
    }
}

В качестве альтернативы можно использовать функции value() и setValue() Settings:

import QtQuick.Controls
import Qt.labs.settings

ApplicationWindow {
    // ...

    Component.onCompleted: splitView.restoreState(settings.value("ui/splitview"))
    Component.onDestruction: settings.setValue("ui/splitview", splitView.saveState())

    Settings {
        id: settings
    }

    SplitView {
        id: splitView
        // ...
    }
}

См. также SplitHandle, Настройка SplitView и Контейнеры элементов управления.

Документация по свойствам

handle : Component

Это свойство содержит компонент разделителя.

Экземпляр этого компонента будет создан count - 1 раз, если count больше, чем 1.

В следующей таблице показано, как каждый разделитель будет изменен в зависимости от ориентации split-view:

Чтобы изменить размер разделителя для событий мыши и касания без изменения его визуального размера, используйте containmentMask:

SplitView {
    id: splitView
    anchors.fill: parent

    handle: Rectangle {
        implicitWidth: 4
        implicitHeight: 4
        color: SplitHandle.pressed ? "#81e889"
            : (SplitHandle.hovered ? Qt.lighter("#c2f4c6", 1.1) : "#c2f4c6")

        containmentMask: Item {
            x: -width / 2
            width: 64
            height: splitView.height
        }
    }

    Rectangle {
        implicitWidth: 150
        color: "#444"
    }
    Rectangle {
        implicitWidth: 50
        color: "#666"
    }
}

См. также Настройка SplitView.

orientation : перечисление

Это свойство содержит ориентацию SplitView.

Ориентация определяет, как выравниваются разделенные элементы:

Возможные значения:

[только для чтения] resizing : bool

Это свойство true при перетаскивании пользователем разделенных элементов с помощью разделителей.

Документация по присоединенным свойствам

SplitView.fillHeight : bool

Это присоединенное свойство определяет, занимает ли элемент оставшееся пространство в SplitView после размещения всех других элементов.

По умолчанию последнее видимое дочернее окно SplitView имеет это значение, но его можно изменить, явно установив fillHeight в true для другого элемента.

Высота разделительного элемента с fillHeight установленным в true все еще ограничена значениями minimumHeight и maximumHeight.

См. также minimumHeight, preferredHeight, maximumHeight и fillWidth.

SplitView.fillWidth : bool

Это присоединенное свойство определяет, занимает ли элемент оставшееся пространство в SplitView после размещения всех других элементов.

По умолчанию последнее видимое дочернее окно SplitView имеет это значение, но его можно изменить, явно установив fillWidth в true для другого элемента.

Ширина разделительного элемента с fillWidth установленным в true все еще ограничена значениями minimumWidth и maximumWidth.

См. также minimumWidth, preferredWidth, maximumWidth и fillHeight.

SplitView.maximumHeight : real

Это присоединённое свойство управляет максимальной высотой элемента разделения. preferredHeight ограничено значениями minimumHeight и maximumHeight. Элемент разделения нельзя перетащить, чтобы он стал больше своего maximumHeight.

Значение по умолчанию — Infinity. Чтобы сбросить это свойство до значения по умолчанию, установите его в undefined.

См. также minimumHeight, preferredHeight, fillHeight и maximumWidth.

SplitView.maximumWidth : real

Это присоединённое свойство управляет максимальной шириной элемента разделения. preferredWidth ограничено значениями minimumWidth и maximumWidth. Элемент разделения нельзя перетащить, чтобы он стал больше своего maximumWidth.

Значение по умолчанию — Infinity. Чтобы сбросить это свойство до значения по умолчанию, установите его в undefined.

См. также minimumWidth, preferredWidth, fillWidth и maximumHeight.

SplitView.minimumHeight : real

Это присоединённое свойство управляет минимальной высотой элемента разделения. preferredHeight ограничено значениями minimumHeight и maximumHeight. Элемент разделения нельзя перетащить, чтобы он стал меньше своего minimumHeight.

Значение по умолчанию — 0. Чтобы сбросить это свойство до значения по умолчанию, установите его в undefined.

См. также maximumHeight, preferredHeight, fillHeight и minimumWidth.

SplitView.minimumWidth : real

Это присоединённое свойство управляет минимальной шириной элемента разделения. preferredWidth ограничено значениями minimumWidth и maximumWidth. Элемент разделения нельзя перетащить, чтобы он стал меньше своего minimumWidth.

Значение по умолчанию — 0. Чтобы сбросить это свойство до значения по умолчанию, установите его в undefined.

См. также maximumWidth, preferredWidth, fillWidth и minimumHeight.

SplitView.preferredHeight : real

Это присоединённое свойство управляет предпочтительной высотой элемента разделения. Предпочтительная высота будет использоваться в качестве размера элемента и будет ограничена значениями minimumHeight и maximumHeight. Если предпочтительная высота не задана, будет использоваться implicitHeight элемента.

При изменении размера элемента разделения preferredHeight будет установлено для отслеживания нового размера.

По умолчанию это свойство не задано, и поэтому используется implicitHeight. Чтобы сбросить это свойство до значения по умолчанию, установите его в undefined.

См. также minimumHeight, maximumHeight, fillHeight и preferredWidth.

SplitView.preferredWidth : real

Это присоединённое свойство управляет предпочтительной шириной элемента разделения. Предпочтительная ширина будет использоваться в качестве размера элемента и будет ограничена значениями minimumWidth и maximumWidth. Если предпочтительная ширина не задана, будет использоваться implicitWidth элемента.

При изменении размера элемента разделения preferredWidth будет установлено для отслеживания нового размера.

По умолчанию это свойство не задано, и поэтому используется implicitWidth. Чтобы сбросить это свойство до значения по умолчанию, установите его в undefined.

См. также minimumWidth, maximumWidth, fillWidth и preferredHeight.

SplitView.view : SplitView

Это присоединённое свойство содержит элемент разделения, к которому он присоединён, или null если элемент не находится в элементе разделения.

Документация по методам

bool restoreState(state)

Считывает предпочтительные размеры из state и применяет их к элементам разделения.

Возвращает true если состояние было успешно восстановлено, иначе false.

См. также Сериализация состояния SplitView и saveState().

var saveState()

Сохраняет предпочтительные размеры элементов разделения в массив байтов и возвращает его.

См. также Сериализация состояния SplitView и restoreState().