Тип QML SwipeDelegate

Делегат элемента со свайпом. Подробнее...

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

Свойства

• swipe
  • swipe.behind : Компонент
  • swipe.behindItem : Элемент
  • swipe.complete : bool
  • swipe.enabled : bool
  • swipe.left : Компонент
  • swipe.leftItem : Элемент
  • swipe.position : real
  • swipe.right : Компонент
  • swipe.rightItem : Элемент
  • swipe.transition : Переход

Прикреплённые свойства

• pressed : bool

Сигналы

• void swipe.closed()
• void swipe.completed()
• void swipe.opened()

Прикреплённые сигналы

• clicked()

Методы

• void swipe.close()
• void swipe.open(перечисление side)

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

SwipeDelegate представляет элемент представления, который можно перетащить влево или вправо, чтобы отобразить дополнительные параметры или информацию. Он используется в качестве делегата в представлениях, таких как ListView.

В следующем примере SwipeDelegate используется в ListView, чтобы позволить удаление элементов из него путем свайпа влево:

ListView {
    id: listView
    anchors.fill: parent
    model: ListModel {
        ListElement { sender: "Bob Bobbleton"; title: "How are you going?" }
        ListElement { sender: "Rug Emporium"; title: "SALE! All rugs MUST go!" }
        ListElement { sender: "Electric Co."; title: "Electricity bill 15/07/2016 overdue" }
        ListElement { sender: "Tips"; title: "Five ways this tip will save your life" }
    }
    delegate: SwipeDelegate {
        id: swipeDelegate
        text: model.sender + " - " + model.title
        width: parent.width

        ListView.onRemove: SequentialAnimation {
            PropertyAction {
                target: swipeDelegate
                property: "ListView.delayRemove"
                value: true
            }
            NumberAnimation {
                target: swipeDelegate
                property: "height"
                to: 0
                easing.type: Easing.InOutQuad
            }
            PropertyAction {
                target: swipeDelegate
                property: "ListView.delayRemove"
                value: false
            }
        }

        swipe.right: Label {
            id: deleteLabel
            text: qsTr("Delete")
            color: "white"
            verticalAlignment: Label.AlignVCenter
            padding: 12
            height: parent.height
            anchors.right: parent.right

            SwipeDelegate.onClicked: listView.model.remove(index)

            background: Rectangle {
                color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
            }
        }
    }
}

SwipeDelegate наследует свой API от ItemDelegate, который, в свою очередь, наследует от AbstractButton. Например, можно установить текст и реагировать на щелчки с помощью API AbstractButton.

Информация о ходе свайпа, а также компоненты, которые должны отображаться при свайпе, доступны через групповый объект свойства swipe. Например, swipe.position содержит позицию свайпа в диапазоне -1.0 до 1.0. Свойство swipe.left определяет, какой элемент будет отображаться при свайпе вправо, и наоборот для swipe.right. Размещение этих компонентов определяется приложениями. Например, без указания позиции для swipe.left или swipe.right, произойдёт следующее:

Если swipe.left и swipe.right закреплены слева и справа от элемента background (соответственно), они будут вести себя так:

При использовании swipe.left и swipe.right, элемент нельзя перетащить за крайние левые и правые позиции. Для достижения такого поведения "оборачивания" установите swipe.behind. В результате будет отображаться тот же элемент независимо от того, в каком направлении происходит свайп. Например, на изображении ниже мы установили swipe.behind, а затем многократно свайпаем элемент в обоих направлениях:

См. также Настройка SwipeDelegate, Делегатские элементы управления и Пример "Свайп для удаления".

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

swipe.behind : Компонент

SwipeDelegate {
    swipe.transition: Transition {
        SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic }
    }
}

См. также contentItem, background, swipe.open() и swipe.close().

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

[только для чтения, начиная с QtQuick.Controls 2.1 (Qt 5.8)] SwipeDelegate.pressed : bool

Это свойство можно присоединить к неинтерактивному элементу, объявленному в swipe.left, swipe.right, или swipe.behind, чтобы определить, нажат ли он. Элементы могут быть нажаты только тогда, когда swipe.complete равно true.

Например:

swipe.right: Label {
    anchors.right: parent.right
    height: parent.height
    text: "Action"
    color: "white"
    padding: 12
    background: Rectangle {
        color: SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
    }
}

Возможно иметь несколько элементов, которые индивидуально получают события мыши и касания. Например, чтобы получить два действия в элементе swipe.right, используйте следующий код:

swipe.right: Row {
    anchors.right: parent.right
    height: parent.height

    Label {
        id: moveLabel
        text: qsTr("Move")
        color: "white"
        verticalAlignment: Label.AlignVCenter
        padding: 12
        height: parent.height

        SwipeDelegate.onClicked: console.log("Moving...")

        background: Rectangle {
            color: moveLabel.SwipeDelegate.pressed ? Qt.darker("#ffbf47", 1.1) : "#ffbf47"
        }
    }
    Label {
        id: deleteLabel
        text: qsTr("Delete")
        color: "white"
        verticalAlignment: Label.AlignVCenter
        padding: 12
        height: parent.height

        SwipeDelegate.onClicked: console.log("Deleting...")

        background: Rectangle {
            color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
        }
    }
}

Обратите внимание, как присвоение color в каждом элементе background квалифицирует присоединённое свойство с id метки. Это важно; использование присоединенных свойств в элементе заставляет этот элемент принимать события. Предположим, что мы опустили id в предыдущем примере:

color: SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"

Элемент фона Rectangle является дочерним элементом метки, поэтому он естественным образом получает события раньше неё. На практике это означает, что цвет фона изменится, но обработчик onClicked в метке никогда не будет вызван.

Для интерактивных элементов управления (таких как Button), объявленных в этих элементах, используйте их соответствующее свойство pressed.

Для нажатий на сам SwipeDelegate используйте его свойство pressed.

Это свойство было представлено в QtQuick.Controls 2.1 (Qt 5.8).

См. также clicked().

Документация сигналов

[since QtQuick.Controls 2.2 (Qt 5.9)] void swipe.closed()

Этот сигнал генерируется, когда делегат был свайпнут до закрытия и переход завершен.

Это полезно для выполнения некоторого действия при отмене свайпа. Например, его можно использовать для отмены удаления делегата из списка, в котором он находится.

Примечание: Соответствующий обработчик — onSwipe.closed.

Этот сигнал был представлен в QtQuick.Controls 2.2 (Qt 5.9).

См. также swipe и swipe.opened().

[since QtQuick.Controls 2.1 (Qt 5.8)] void swipe.completed()

Этот сигнал генерируется, когда swipe.complete становится true.

Это полезно для выполнения некоторого действия при завершении свайпа. Например, его можно использовать для удаления делегата из списка, в котором он находится.

Примечание: Соответствующий обработчик — onSwipe.completed.

Этот сигнал был представлен в QtQuick.Controls 2.1 (Qt 5.8).

См. также swipe.

[since QtQuick.Controls 2.2 (Qt 5.9)] void swipe.opened()

Этот сигнал генерируется, когда делегат был открыт свайпом и переход завершен.

Это полезно для выполнения некоторого действия по завершении свайпа. Например, его можно использовать для удаления делегата из списка, в котором он находится.

Примечание: Соответствующий обработчик — onSwipe.opened.

Этот сигнал был представлен в QtQuick.Controls 2.2 (Qt 5.9).

См. также swipe и swipe.closed().

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

[since QtQuick.Controls 2.1 (Qt 5.8)] clicked()

Этот сигнал можно присоединить к неинтерактивному элементу, объявленному в swipe.left, swipe.right, или swipe.behind, чтобы реагировать на щелчки. Элементы могут быть нажаты только когда swipe.complete равно true.

Для интерактивных элементов управления (таких как Button), объявленных в этих элементах, используйте их соответствующий сигнал clicked().

Для реагирования на щелчки по самому SwipeDelegate используйте его сигнал clicked().

Примечание: См. документацию по pressed для информации о правильном использовании свойств, связанных с событиями.

Примечание: Соответствующий обработчик — onClicked.

Этот сигнал был представлен в QtQuick.Controls 2.1 (Qt 5.8).

См. также pressed.

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

[since QtQuick.Controls 2.1 (Qt 5.8)] void swipe.close()

Этот метод устанавливает position свайпа в 0. Будут запущены любые анимации, определенные для позиции x элементов contentItem и background.

Этот метод был представлен в QtQuick.Controls 2.1 (Qt 5.8).

См. также swipe и swipe.open().

[since QtQuick.Controls 2.2 (Qt 5.9)] void swipe.open(enumeration side)

Этот метод устанавливает position свайпа так, чтобы он открывался со стороны side.

Доступные значения:

Будут запущены любые анимации, определённые для позиции x элемента contentItem и background.

Этот метод был представлен в QtQuick.Controls 2.2 (Qt 5.9).

См. также swipe и swipe.close().