SwipeView QML Type

사용자가 옆으로 스와이프하여 페이지를 탐색할 수 있습니다. 더 보기...

• 상속된 구성원을 포함한 모든 구성원 목록

속성

• horizontal : bool (since QtQuick.Controls 2.3 (Qt 5.10))
• interactive : bool (since QtQuick.Controls 2.1 (Qt 5.8))
• orientation : enumeration (since QtQuick.Controls 2.2 (Qt 5.9))
• vertical : bool (since QtQuick.Controls 2.3 (Qt 5.10))

첨부 속성

• index : int
• isCurrentItem : bool
• isNextItem : bool (since QtQuick.Controls 2.1 (Qt 5.8))
• isPreviousItem : bool (since QtQuick.Controls 2.1 (Qt 5.8))
• view : SwipeView

자세한 설명

스와이프뷰는 스와이프 기반 탐색 모델을 제공합니다.

스와이프뷰는 페이지 집합으로 채워집니다. 한 번에 한 페이지씩 표시됩니다. 사용자는 옆으로 스와이프하여 페이지 사이를 이동할 수 있습니다. 스와이프뷰 자체는 완전히 비시각적이라는 점에 유의하세요. 사용자에게 여러 페이지가 있다는 시각적 단서를 제공하기 위해 PageIndicator 와 결합하는 것이 좋습니다.

SwipeView {
    id: view

    currentIndex: 1
    anchors.fill: parent

    Item {
        id: firstPage
    }
    Item {
        id: secondPage
    }
    Item {
        id: thirdPage
    }
}

PageIndicator {
    id: indicator

    count: view.count
    currentIndex: view.currentIndex

    anchors.bottom: view.bottom
    anchors.horizontalCenter: parent.horizontalCenter
}

위에 표시된 것처럼 SwipeView는 일반적으로 뷰의 자식으로 인라인으로 정의된 정적 페이지 집합으로 채워집니다. add , insert, move, remove 페이지를 런타임에 동적으로 채울 수도 있습니다.

SwipeView가 TabBar 와 같은 다른 컨테이너와 쌍을 이루는 경우 각 컨트롤의 currentIndex 속성 간에 양방향 바인딩을 만들어야 합니다. 바인딩을 깨지 않고 이 작업을 수행하려면 currentIndex 를 직접 설정하지 말고 대신 setCurrentIndex() 등을 사용하세요. 자세한 내용은 Managing the Current Index 을 참조하세요.

currentIndex 변경 시 작업을 수행하려면 onCurrentIndexChanged 속성 변경 신호 처리기를 사용합니다:

onCurrentIndexChanged: {
    print("currentIndex changed to", currentIndex)
    // ...
}

일반적으로 스와이프뷰에 과도한 양의 페이지를 추가하는 것은 바람직하지 않습니다. 그러나 페이지의 양이 많아지거나 개별 페이지가 상대적으로 복잡한 경우에는 사용자가 바로 접근할 수 없는 페이지를 언로드하여 리소스를 확보하는 것이 바람직할 수 있습니다. 다음 예는 Loader 을 사용하여 최대 3개의 페이지를 동시에 인스턴스화하는 방법을 보여줍니다.

SwipeView {
    Repeater {
        model: 6
        Loader {
            active: SwipeView.isCurrentItem || SwipeView.isNextItem || SwipeView.isPreviousItem
            sourceComponent: Text {
                text: index
                Component.onCompleted: console.log("created:", index)
                Component.onDestruction: console.log("destroyed:", index)
            }
        }
    }
}

TabBar, PageIndicator, 스와이프뷰, 탐색 컨트롤, 컨테이너 컨트롤 및 포커스 관리 사용자 지정하기( Qt Quick Controls )를참조하세요 .

속성 문서

첨부된 속성 문서