SwipeDelegate QML 类型

可滑动项代理。更多...

导入语句	import QtQuick.Controls
继承	ItemDelegate

所有成员的列表，包括继承的成员

属性

swipe
- swipe.behind : 组件
- swipe.behindItem : 项目
- swipe.complete : 布尔型
- swipe.enabled : 布尔型
- swipe.left : 组件
- swipe.leftItem : 项目
- swipe.position : 实数
- swipe.right : 组件
- swipe.rightItem : 项目
- swipe.transition : 转换

附加属性

pressed : 布尔型 (自 QtQuick.Controls 2.1 (Qt 5.8))

信号

void swipe.closed() (自 QtQuick.Controls 2.2 (Qt 5.9))
void swipe.completed() (自 QtQuick.Controls 2.1 (Qt 5.8))
void swipe.opened() (自 QtQuick.Controls 2.2 (Qt 5.9))

附加信号

clicked() (自 QtQuick.Controls 2.1 (Qt 5.8))

方法

void swipe.close() (自 QtQuick.Controls 2.1 (Qt 5.8))
void swipe.open(枚举side) (自 QtQuick.Controls 2.2 (Qt 5.9))

详细描述

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: sender + " - " + title
        width: listView.width

        required property string sender
        required property string title
        required property int index

        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从ItemDelegate继承其API，而ItemDelegate又继承自AbstractButton。例如，您可以使用AbstractButton API设置文本并响应点击。

有关滑动进度以及滑动时应该显示的组件的信息，都可以通过swipe分组属性对象获得。例如，swipe.position包含滑动的位置，范围在-1.0到1.0之间。当控制滑动到右侧时，由swipe.left属性确定将显示哪个项目，反之亦然，对于swipe.right。应用程序负责这些组件的对齐。例如，如果不指定swipe.left或swipe.right的位置，则会发生以下情况

如果swipe.left和swipe.right分别锚定到背景项目的左侧和右侧，它们将表现出以下行为

当使用swipe.left和swipe.right时，控制无法滑动到左侧和右侧边缘。要实现这种类型的“包装”行为，请设置swipe.behind。这将导致无论控制向哪个方向滑动，都会显示相同的项。例如，在下面的图像中，我们设置了swipe.behind然后将控制重复地在两个方向上滑动

另请参阅定制SwipeDelegate、代理控件和示例画廊。

属性文档

swipe分组
swipe.behind : 组件
swipe.behindItem : 项
swipe.complete : 布尔值
swipe.enabled : 布尔值
swipe.left : 组件
swipe.leftItem : 项
swipe.position : 实数
swipe.right : 组件
swipe.rightItem : 项
swipe.transition : 转换

名称	描述
位置	这个只读属性保存滑动相对于控件两侧的位置。当此值达到`-1.0`（左侧）或`1.0`（右侧），且鼠标按钮被释放时，`complete`将为`true`。
完成	这个只读属性保存控制是否在向左或向右滑动后被完全暴露。当complete为`true`时，在`left`、`right`或`behind`中声明的任何交互性项将接收鼠标事件。
启用	此属性确定控制是否可以被滑动。此属性在QtQuick.Controls 2.2中添加。
左侧	此属性包含左侧代理。左侧代理位于内容项和背景之后。当SwipeDelegate向右滑动时，此项目将被逐步显示。此处可以使用交互和非交互项。适用正常事件处理规则；如果使用按钮等交互控制，当按钮被点击时，不会发出clicked()等SwipeDelegate交互信号。
之后	此属性包含当SwipeDelegate向左和右滑动时显示的代理。与左侧和右侧代理类似，它位于内容项和背景之后。然而，已设置behind的SwipeDelegate可以连续从两侧滑动，并且始终显示相同的项。此处可以使用交互和非交互项。适用正常事件处理规则；如果使用按钮等交互控制，当按钮被点击时，不会发出clicked()等SwipeDelegate交互信号。
右侧	此属性包含右侧代理。右侧代理位于内容项和背景之后。当SwipeDelegate向左滑动时，此项目将被逐步显示。此处可以使用交互和非交互项。适用正常事件处理规则；如果使用按钮等交互控制，当按钮被点击时，不会发出clicked()等SwipeDelegate交互信号。
leftItem	此只读属性包含从`left`组件实例化的项。如果未设置`left`或SwipeDelegate创建后位置没有变化，此属性将是`null`。
behindItem	此只读属性包含从`behind`组件实例化的项。如果未设置`behind`或SwipeDelegate创建后位置没有变化，此属性将是`null`。
rightItem	此只读属性包含从`right`组件实例化的项。如果未设置`right`或SwipeDelegate创建后位置没有变化，此属性将是`null`。
过渡	此属性包含在释放滑动手势或调用swipe.open()或swipe.close()时应用的过渡。 SwipeDelegate { swipe.transition: Transition { SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic } } } 此属性在Qt Quick Controls 2.2中添加。

另请参阅 内容项、背景、swipe.open()和swipe.close()。

附加属性文档

SwipeDelegate.pressed : bool [只读，自 QtQuick.Controls 2.1 (Qt 5.8)]

可以将此属性附加到在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分配如何使用标签的id来限定附加属性。这很重要；在项上使用附加属性会导致该项接收事件。假设我们省略了前面的例子中的id

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

矩形背景项是标签的子项，因此它自然会在标签之前接收到事件。实际上，这意味着背景颜色会改变，但标签中的onClicked处理器将永远不会被调用。

对于在这些项中声明的交互控件（如按钮），请使用各自的pressed属性。

对于对SwipeDelegate本身的按压，请使用其pressed属性。

此属性是在QtQuick.Controls 2.1（Qt 5.8）中引入的。

另请参阅clicked()。

信号文档

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

当委托已被滑动关闭且转换完成时，将发出此信号。

这对于在滑动取消时执行某些操作是有用的。例如，可以用它取消从其中移除委托的操作。

注意：相应的处理程序是swipe.onClosed。

此信号是在QtQuick.Controls 2.2（Qt 5.9）中引入的。

另请参阅swipe和swipe.opened()。

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

当swipe.complete变为true时，发出此信号。

这对于在滑动完成后执行某些操作是有用的。例如，可以用它从委托所在的列表中移除委托。

注意：相应的处理程序是swipe.onCompleted。

此信号是在QtQuick.Controls 2.1（Qt 5.8）中引入的。

另请参阅swipe。

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

当委托已被滑动打开且转换完成时，将发出此信号。

这对于在滑动完成后执行某些操作是有用的。例如，可以用它从委托所在的列表中移除委托。

注意：相应的处理程序是swipe.onOpened。

此信号是在QtQuick.Controls 2.2（Qt 5.9）中引入的。

另请参阅swipe和swipe.closed()。

附加信号文档

[自QtQuick.Controls 2.1 (Qt 5.8)起] clicked()

可以将此信号连接到在swipe.left、swipe.right或swipe.behind中声明的非交互项，以响应用户点击。只有在swipe.complete为true时，项目才能被点击。

对于在这些项中声明的交互控件（如按钮），请使用各自的clicked()信号。

要响应用户对SwipeDelegate本身的点击，请使用其clicked()信号。

注意：有关如何正确使用事件相关属性的信息，请参阅pressed文档。

注意：相应的处理程序是onClicked。

此信号是在QtQuick.Controls 2.1（Qt 5.8）中引入的。

另请参阅pressed。

方法文档

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

此方法将swipe的位置设置为0。对于为x位置的contentItem和background定义的任何动画都将被触发。

此方法在QtQuick.Controls 2.1（Qt 5.8）中引入。

另见swipe和swipe.open。

[自QtQuick.Controls 2.2（Qt 5.9）起] void swipe.open(枚举 side)

此方法设置position，以便从指定的side打开滑动。

可用值

常量	描述
`SwipeDelegate.Left`	`position`被设置为`1`，这使得滑动从左侧打开。必须指定`swipe.left`或`swipe.behind`；否则调用将被忽略。
`SwipeDelegate.Right`	`position`被设置为`-1`，这使得滑动从右侧打开。必须指定`swipe.right`或`swipe.behind`；否则调用将被忽略。

将触发为x位置的contentItem和background定义的任何动画。

此方法在QtQuick.Controls 2.2（Qt 5.9）中引入。

另见swipe和swipe.close。