内容

• 特性
• 附加特性
• 信号
• 附加信号
• 方法
• 详细描述

SwipeDelegate QML Type

Swipable item delegate. 更多...

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

特性

• swipe
  • swipe.position : real
  • swipe.complete : bool
  • swipe.enabled : bool
  • swipe.left : Component
  • swipe.behind : Component
  • swipe.right : Component
  • swipe.leftItem : Item
  • swipe.behindItem : Item
  • swipe.rightItem : Item
  • swipe.transition : Transition

附加特性

• pressed : bool

信号

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

附加信号

• void clicked ()

方法

• void swipe.close ()
• void swipe.open (enumeration side )

详细描述

SwipeDelegate presents a view item that can be swiped left or right to expose more options or information. It is used as a delegate in views such as ListView .

在以下范例中， SwipeDelegate is used in a ListView to allow items to be removed from it by swiping to the left:

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 inherits its API from ItemDelegate , which is inherited from AbstractButton . For instance, you can set text , and react to clicks 使用 AbstractButton API.

Information regarding the progress of a swipe, as well as the components that should be shown upon swiping, are both available through the swipe grouped property object. For example, swipe.position holds the position of the swipe within the range -1.0 to 1.0 。 swipe.left property determines which item will be displayed when the control is swiped to the right, and vice versa for swipe.right . The positioning of these components is left to applications to decide. For example, without specifying any position for swipe.left or swipe.right , the following will occur:

若 swipe.left and swipe.right are anchored to the left and right of the background item (respectively), they'll behave like this:

当使用 swipe.left and swipe.right , the control cannot be swiped past the left and right edges. To achieve this type of "wrapping" behavior, set swipe.behind instead. This will result in the same item being shown regardless of which direction the control is swiped. For example, in the image below, we set swipe.behind and then swipe the control repeatedly in both directions:

另请参阅 Customizing SwipeDelegate , 委托控件 ，和 Swipe to Remove Example .

特性文档编制

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

另请参阅 contentItem , background , swipe.open() ，和 swipe.close() .

附加特性文档编制

This property can be attached to a non-interactive item declared in swipe.left , swipe.right ，或 swipe.behind , in order to detect if it is pressed. Items can only be pressed when swipe.complete is 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"
    }
}
																				

It is possible to have multiple items which individually receive mouse and touch events. For example, to have two actions in the swipe.right item, use the following code:

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"
        }
    }
}
																				

Note how the color assignment in each background item qualifies the attached property with the id of the label. This is important; using the attached properties on an item causes that item to accept events. Suppose we had left out the id in the previous example:

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

The Rectangle background item is a child of the label, so it naturally receives events before it. In practice, this means that the background color will change, but the onClicked handler in the label will never get called.

For interactive controls (such as Button ) declared in these items, use their respective pressed 特性代替。

For presses on the SwipeDelegate itself, use its pressed 特性。

This QML property was introduced in QtQuick.Controls 2.1 (Qt 5.8).

另请参阅 clicked() .

信号文档编制

This signal is emitted when the delegate has been swiped to closed and the transition has finished.

It is useful for performing some action upon cancellation of a swipe. For example, it can be used to cancel the removal of the delegate from the list that it is in.

This QML signal was introduced in QtQuick.Controls 2.2 (Qt 5.9).

另请参阅 swipe and swipe.opened() .

此信号被发射当 swipe.complete becomes true .

It is useful for performing some action upon completion of a swipe. For example, it can be used to remove the delegate from the list that it is in.

This QML signal was introduced in QtQuick.Controls 2.1 (Qt 5.8).

另请参阅 swipe .

This signal is emitted when the delegate has been swiped open and the transition has finished.

It is useful for performing some action upon completion of a swipe. For example, it can be used to remove the delegate from the list that it is in.

This QML signal was introduced in QtQuick.Controls 2.2 (Qt 5.9).

另请参阅 swipe and swipe.closed() .

附加信号文档编制

This signal can be attached to a non-interactive item declared in swipe.left , swipe.right ，或 swipe.behind , in order to react to clicks. Items can only be clicked when swipe.complete is true .

For interactive controls (such as Button ) declared in these items, use their respective clicked() 信号代替。

To respond to clicks on the SwipeDelegate itself, use its clicked() 信号。

注意： 见文档编制为 pressed for information on how to use the event-related properties correctly.

This QML signal was introduced in QtQuick.Controls 2.1 (Qt 5.8).

另请参阅 pressed .

方法文档编制

This method sets the 位置 of the swipe to 0 . Any animations defined for the x position of contentItem and background will be triggered.

This QML method was introduced in QtQuick.Controls 2.1 (Qt 5.8).

另请参阅 swipe and swipe.open() .

This method sets the 位置 of the swipe so that it opens from the specified side .

Available values:

Any animations defined for the x position of contentItem and background will be triggered.

This QML method was introduced in QtQuick.Controls 2.2 (Qt 5.9).

另请参阅 swipe and swipe.close() .