SwipeDelegate QML Type
スワイプ可能アイテムのデリゲート。もっと見る...
Import Statement: | import QtQuick.Controls |
Inherits: |
プロパティ
- 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 などのビューでデリゲートとして使用されます。
次の例では、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.left
やswipe.right
の位置を指定しない場合、次のようになります:
swipe.left
とswipe.right
が、それぞれbackground の左と右に固定されている場合、次のように動作します:
swipe.left
とswipe.right
を使用する場合、コントロールを左右の端を越えてスワイプすることはできません。このような「折り返し」動作を実現するには、代わりにswipe.behind
を設定します。これにより、コントロールがどの方向にスワイプされても、同じアイテムが表示されるようになります。例えば、下の画像では、swipe.behind
を設定し、コントロールを両方向に繰り返しスワイプしています:
SwipeDelegateのカスタマイズ」、「Delegateコントロール」、「ギャラリーの例」も参照してください 。
プロパティの説明
プロパティ名 | 説明 |
---|---|
位置 | この読み取り専用プロパティは、コントロールのいずれかの側からのスワイプの相対位置を保持します。この値が-1.0 (左側) または1.0 (右側) のいずれかに到達し、マウスボタンが離されると、complete はtrue になります。 |
コンプリート | この読み取り専用プロパティは、コントロールが左または右にスワイプされた後、完全に露出しているかどうかを保持する。 completeが |
有効 | このプロパティは、コントロールをスワイプできるかどうかを決定する。 このプロパティは、QtQuick.Controls 2.2で追加された。 |
left | このプロパティは、左デリゲートを保持します。 左デリゲートは、contentItem とbackground の後ろに位置します。SwipeDelegate を右にスワイプすると、この項目が徐々に現れます。 ここでは、インタラクティブなアイテムとそうでないアイテムの両方を使用できます。通常のイベント・ハンドリング・ルールが適用されます。Button のようなインタラクティブ・コントロールが使用されている場合、ボタンがクリックされてもclicked() のようなSwipeDelegate のインタラクション・シグナルは発生しません。 |
背後 | このプロパティは、SwipeDelegate が左右にスワイプされたときに表示されるデリゲートを保持します。
ここでは、インタラクティブなアイテムとそうでないアイテムの両方を使うことができる。通常のイベント処理ルールが適用されます。Button のような対話型コントロールが使用されている場合、ボタンがクリックされてもclicked() のようなSwipeDelegate の対話型シグナルは発せられません。 |
右 | このプロパティは、右デリゲートを保持します。 右デリゲートは、contentItem とbackground の後ろに位置します。SwipeDelegate を左にスワイプすると、この項目が徐々に表示されます。 ここでは、インタラクティブなアイテムとそうでないアイテムの両方を使用することができます。通常のイベント処理ルールが適用されます。Button のようなインタラクティブ・コントロールが使用されている場合、ボタンがクリックされてもclicked() のようなSwipeDelegate のインタラクション・シグナルは発せられません。 |
左アイテム | この読み取り専用プロパティは、left コンポーネントからインスタンス化されたアイテムを保持する。
|
ビハインドアイテム | この読み取り専用プロパティは、behind コンポーネントからインスタンス化されたアイテムを保持する。
|
rightItem | この読み取り専用プロパティは、right コンポーネントからインスタンス化されたアイテムを保持する。
|
トランジション | このプロパティは、スワイプが解除されたとき、または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 |
このプロパティは、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
で 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()も参照してください 。
シグナルのドキュメント
|
このシグナルは、デリゲートがスワイプされて閉じられ、遷移が終了したときに発せられます。
スワイプのキャンセル時に何らかのアクションを実行するのに便利です。例えば、デリゲートが含まれるリストからのデリゲートの削除をキャンセルするために使用できます。
注: 対応するハンドラはswipe.onClosed
です。
このシグナルは QtQuick.Controls 2.2 (Qt 5.9) で導入されました。
swipe とswipe.opened()も参照してください 。
|
このシグナルはswipe.complete
がtrue
になったときに発せられます。
スワイプ完了時に何らかのアクションを実行するのに便利です。例えば、デリゲートが入っているリストからデリゲートを削除するために使用できます。
注: 対応するハンドラはswipe.onCompleted
です。
このシグナルは QtQuick.Controls 2.1 (Qt 5.8) で導入されました。
swipeも参照してください 。
|
このシグナルは、デリゲートがスワイプされて開かれ、遷移が終了したときに発行されます。
スワイプ完了時に何らかのアクションを実行するのに便利です。例えば、デリゲートが入っているリストからデリゲートを削除するために使用できます。
注: 対応するハンドラはswipe.onOpened
です。
このシグナルは QtQuick.Controls 2.2 (Qt 5.9) で導入されました。
swipe とswipe.closed()も参照してください 。
アタッチされたシグナルのドキュメント
|
このシグナルは、swipe.left
、swipe.right
、swipe.behind
で宣言された非インタラクティブアイテムにアタッチして、クリックに反応させることができます。アイテムがクリックされるのは、swipe.complete
がtrue
のときだけです。
これらの項目で宣言されたインタラクティブ・コントロール(Button など)については、代わりにそれぞれのclicked()
シグナルを使用してください。
SwipeDelegate 自体のクリックに反応するには、そのclicked() シグナルを使用します。
注意: イベント関連プロパティを正しく使用する方法については、pressed のドキュメントを参照してください。
注: 対応するハンドラはonClicked
です。
このシグナルは QtQuick.Controls 2.1 (Qt 5.8) で導入されました。
pressedも参照してください 。
メソッドのドキュメント
|
このメソッドは、スワイプのposition
を0
に設定します。contentItem とbackground のx の位置に定義されたアニメーションがトリガーされます。
このメソッドは QtQuick.Controls 2.1 (Qt 5.8) で導入されました。
swipe およびswipe.open()も参照してください 。
|
このメソッドは、指定されたside から開くようにスワイプのposition
を設定します。
利用可能な値
定数 | 説明 |
---|---|
SwipeDelegate.Left | position が1 に設定され、スワイプが左から開くようになります。swipe.left またはswipe.behind のいずれかが指定されていなければならない。そうでない場合、呼び出しは無視される。 |
SwipeDelegate.Right | position は-1 に設定され、スワイプは右から開かれる。swipe.right またはswipe.behind のいずれかが指定されていなければならない。そうでない場合、呼び出しは無視される。 |
contentItem とbackground のx の位置に定義されたアニメーションはすべてトリガーされます。
このメソッドは QtQuick.Controls 2.2 (Qt 5.9) で導入されました。
swipe とswipe.close()も参照してください 。
©2024 The Qt Company Ltd. 本書に含まれる文書の著作権は、それぞれの所有者に帰属します。 本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の 商標です。その他すべての商標は、それぞれの所有者に帰属します。