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 와 같은 뷰에서 델리게이트로 사용됩니다.

다음 예제에서는 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: 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는 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 컨트롤’ 및 ‘갤러리 예제’도 참조하십시오 .

속성 설명서

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 항목에 두 가지 동작을 포함시키려면 다음 코드를 사용하십시오:

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 배경 항목은 레이블의 자식 요소이므로, 당연히 레이블보다 먼저 이벤트를 수신합니다. 실제로 이는 배경색이 변경되지만, 레이블의 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()도 참조하십시오 .