SwipeDelegate QML Type

スワイプ可能なアイテムのデリゲート。詳細...

• 継承されたメンバーを含む、すべてのメンバーの一覧

プロパティ

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

関連プロパティ

• pressed : bool (since QtQuick.Controls 2.1 (Qt 5.8))

信号

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

添付の信号

• clicked() (since QtQuick.Controls 2.1 (Qt 5.8))

方法

• void swipe.close() (since QtQuick.Controls 2.1 (Qt 5.8))
• void swipe.open(enumeration side) (since QtQuick.Controls 2.2 (Qt 5.9))

詳細な説明

SwipeDelegate は、左右にスワイプすることで追加のオプションや情報を表示できるビュー項目を提供します。これは、ListView などのビューにおいてデリゲートとして使用されます。

以下の例では、ListView 内でSwipeDelegateを使用し、左にスワイプすることでアイテムを削除できるようにしています：

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: removeAnimation.start()

        SequentialAnimation {
            id: removeAnimation

            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は、AbstractButton から継承されたItemDelegate から継承されています。例えば、text を設定したり、AbstractButton APIを使用してclicks に反応したりすることができます。

スワイプの進行状況に関する情報や、スワイプ時に表示すべきコンポーネントは、いずれも `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 group

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

関連項目： contentItem 、background 、swipe.open()、およびswipe.close()。

添付プロパティのドキュメント

SwipeDelegate.pressed : bool [read-only attached, since 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 アイテムに2つのアクションを設定するには、以下のコードを使用します：

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

各background アイテム内のcolor の割り当てにおいて、ラベルのid でアタッチドプロパティを修飾している点に注目してください。これは重要です。アイテムでアタッチドプロパティを使用すると、そのアイテムがイベントを受け取るようになります。前の例でid を省略していたと仮定しましょう：

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

Rectangle のbackgroundアイテムはラベルの子要素であるため、当然ながらラベルよりも先にイベントを受信します。実際には、これは背景色が変更されるものの、ラベル内のonClicked ハンドラは決して呼び出されないことを意味します。

これらの項目内で宣言されたインタラクティブなコントロール（Button など）については、代わりにそれぞれのpressed プロパティを使用してください。

SwipeDelegate 自体への押下については、そのpressed プロパティを使用してください。

このプロパティは QtQuick.Controls 2.1 (Qt 5.8) で導入されました。

clicked()も参照してください 。

シグナルのドキュメント

[since QtQuick.Controls 2.2 (Qt 5.9)] void swipe.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 になったときに発火します。

これは、スワイプが完了した際に何らかの処理を実行するのに役立ちます。例えば、このシグナルを使用して、デリゲートを所属するリストから削除することができます。

このシグナルは、QtQuick.Controls 2.1 (Qt 5.8) で導入されました。

「swipe」も参照してください 。

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

このシグナルは、デリゲートがスワイプされて開き、遷移が完了したときに発生します。

これは、スワイプが完了した際に何らかのアクションを実行するのに役立ちます。例えば、デリゲートをそのデリゲートが属しているリストから削除するために使用できます。

このシグナルは、QtQuick.Controls 2.2 (Qt 5.9) で導入されました。

swipe およびswipe.closed()も参照してください 。

添付のシグナルに関するドキュメント

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

このシグナルは、swipe.left 、swipe.right 、またはswipe.behind で宣言された非インタラクティブなアイテムに添付することで、クリックに応答させることができます。アイテムがクリック可能になるのは、swipe.complete がtrue の場合に限られます。

これらのアイテム内で宣言されたインタラクティブなコントロール（Button など）については、代わりにそれぞれのclicked() シグナルを使用してください。

SwipeDelegate 自体でのクリックに応答するには、そのclicked() シグナルを使用してください。

このシグナルは QtQuick.Controls 2.1 (Qt 5.8) で導入されました。

「pressed」も参照してください 。

メソッドのドキュメント

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

このメソッドは、スワイプのposition を0 に設定します。contentItem およびbackground のx 位置に対して定義されているアニメーションはすべてトリガーされます。

このメソッドは、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()も参照してください 。