SwipeDelegate QML Type

スワイプ可能アイテムのデリゲート。もっと見る...

Import Statement: import QtQuick.Controls
Inherits:

ItemDelegate

プロパティ

付属プロパティ

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

シグナル

アタッチドシグナル

  • 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 などのビューでデリゲートとして使用されます。

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

スワイプの進行状況に関する情報と、スワイプ時に表示されるべきコンポーネントは、どちらもswipe グループ化されたプロパティ・オブジェクトを通じて利用可能です。例えば、swipe.position は、-1.0 から1.0 の範囲内でスワイプの位置を保持する。swipe.left プロパティは、コントロールが右にスワイプされたときに表示される項目を決定し、swipe.right はその逆である。これらのコンポーネントの位置は、アプリケーションの判断に任されています。例えば、swipe.leftswipe.right の位置を指定しない場合、次のようになります:

swipe.leftswipe.right が、それぞれbackground の左と右に固定されている場合、次のように動作します:

swipe.leftswipe.right を使用する場合、コントロールを左右の端を越えてスワイプすることはできません。このような「折り返し」動作を実現するには、代わりにswipe.behind を設定します。これにより、コントロールがどの方向にスワイプされても、同じアイテムが表示されるようになります。例えば、下の画像では、swipe.behind を設定し、コントロールを両方向に繰り返しスワイプしています:

SwipeDelegateのカスタマイズ」、「Delegateコントロール」、「ギャラリーの例」も参照してください

プロパティの説明

swipe group

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

プロパティ名説明
位置この読み取り専用プロパティは、コントロールのいずれかの側からのスワイプの相対位置を保持します。この値が-1.0 (左側) または1.0 (右側) のいずれかに到達し、マウスボタンが離されると、completetrue になります。
コンプリートこの読み取り専用プロパティは、コントロールが左または右にスワイプされた後、完全に露出しているかどうかを保持する。

completeがtrue の場合、leftrightbehind で宣言されたインタラクティブアイテムはマウスイベントを受け取る。

有効このプロパティは、コントロールをスワイプできるかどうかを決定する。

このプロパティは、QtQuick.Controls 2.2で追加された。

leftこのプロパティは、左デリゲートを保持します。

左デリゲートは、contentItembackground の後ろに位置します。SwipeDelegate を右にスワイプすると、この項目が徐々に現れます。

ここでは、インタラクティブなアイテムとそうでないアイテムの両方を使用できます。通常のイベント・ハンドリング・ルールが適用されます。Button のようなインタラクティブ・コントロールが使用されている場合、ボタンがクリックされてもclicked() のようなSwipeDelegate のインタラクション・シグナルは発生しません。

背後このプロパティは、SwipeDelegate が左右にスワイプされたときに表示されるデリゲートを保持します。

leftright のデリゲートと同様に、contentItembackground の後ろに位置します。ただし、behind が設定されたSwipeDelegate は、左右どちらからでも連続してスワイプすることができ、常に同じアイテムが表示されます。

ここでは、インタラクティブなアイテムとそうでないアイテムの両方を使うことができる。通常のイベント処理ルールが適用されます。Button のような対話型コントロールが使用されている場合、ボタンがクリックされてもclicked() のようなSwipeDelegate の対話型シグナルは発せられません。

このプロパティは、右デリゲートを保持します。

右デリゲートは、contentItembackground の後ろに位置します。SwipeDelegate を左にスワイプすると、この項目が徐々に表示されます。

ここでは、インタラクティブなアイテムとそうでないアイテムの両方を使用することができます。通常のイベント処理ルールが適用されます。Button のようなインタラクティブ・コントロールが使用されている場合、ボタンがクリックされてもclicked() のようなSwipeDelegate のインタラクション・シグナルは発せられません。

左アイテムこの読み取り専用プロパティは、left コンポーネントからインスタンス化されたアイテムを保持する。

left が設定されていない場合、またはSwipeDelegate の作成以降に位置が変更されていない場合、このプロパティはnull になります。

ビハインドアイテムこの読み取り専用プロパティは、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 で追加されました。

contentItem,background,swipe.open(),swipe.close()も参照してください


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

SwipeDelegate.pressed : bool [read-only, since QtQuick.Controls 2.1 (Qt 5.8)]

このプロパティは、swipe.leftswipe.right 、またはswipe.behind で宣言された非インタラクティブアイテムにアタッチすることができます。アイテムが押されるのは、swipe.completetrue のときだけです。

例えば

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

各項目backgroundcolor 割り当てが、ラベルのid で attached プロパティを修飾していることに注意してください。これは重要です。attachedプロパティをアイテムに使用すると、そのアイテムがイベントを受け付けるようになります。前の例で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()

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

スワイプのキャンセル時に何らかのアクションを実行するのに便利です。例えば、デリゲートが含まれるリストからのデリゲートの削除をキャンセルするために使用できます。

注: 対応するハンドラはswipe.onClosed です。

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

swipeswipe.opened()も参照してください


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

このシグナルはswipe.completetrue になったときに発せられます。

スワイプ完了時に何らかのアクションを実行するのに便利です。例えば、デリゲートが入っているリストからデリゲートを削除するために使用できます。

注: 対応するハンドラはswipe.onCompleted です。

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

swipeも参照してください


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

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

スワイプ完了時に何らかのアクションを実行するのに便利です。例えば、デリゲートが入っているリストからデリゲートを削除するために使用できます。

注: 対応するハンドラはswipe.onOpened です。

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

swipeswipe.closed()も参照してください


アタッチされたシグナルのドキュメント

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

このシグナルは、swipe.leftswipe.rightswipe.behind で宣言された非インタラクティブアイテムにアタッチして、クリックに反応させることができます。アイテムがクリックされるのは、swipe.completetrue のときだけです。

これらの項目で宣言されたインタラクティブ・コントロール(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()

このメソッドは、スワイプのposition0 に設定します。contentItembackgroundx の位置に定義されたアニメーションがトリガーされます。

このメソッドは QtQuick.Controls 2.1 (Qt 5.8) で導入されました。

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


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

このメソッドは、指定されたside から開くようにスワイプのposition を設定します。

利用可能な値

定数説明
SwipeDelegate.Leftposition1 に設定され、スワイプが左から開くようになります。swipe.left またはswipe.behind のいずれかが指定されていなければならない。そうでない場合、呼び出しは無視される。
SwipeDelegate.Rightposition-1 に設定され、スワイプは右から開かれる。swipe.right またはswipe.behind のいずれかが指定されていなければならない。そうでない場合、呼び出しは無視される。

contentItembackgroundx の位置に定義されたアニメーションはすべてトリガーされます。

このメソッドは QtQuick.Controls 2.2 (Qt 5.9) で導入されました。

swipeswipe.close()も参照してください


©2024 The Qt Company Ltd. 本書に含まれる文書の著作権は、それぞれの所有者に帰属します。 本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。