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

詳細説明

SwipeViewはスワイプベースのナビゲーションモデルを提供します。

SwipeViewにはページが表示されます。一度に1つのページが表示されます。ユーザーは横にスワイプすることでページ間を移動できます。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)
    // ...
}

一般的に、SwipeViewに過剰な量のページを追加することはお勧めしません。しかし、ページの量が多くなったり、個々のページが比較的複雑になったりすると、ユーザーの手の届かないページをアンロードしてリソースを解放することが望ましい場合があります。次の例では、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 の SwipeView、ナビゲーション・コントロール、コンテナ・コントロール、フォーカス管理の カスタマイズも参照してください 。

プロパティ ドキュメント

Attached Property ドキュメント