StackView QML Type

スタックベースのナビゲーションモデルを提供します。詳細...

Import Statement:	`import QtQuick.Controls`
Inherits:	Control

継承されたメンバーを含む全メンバーのリスト

プロパティ

busy : bool
currentItem : Item
depth : int
empty : bool (since QtQuick.Controls 2.3 (Qt 5.10))
initialItem : var
popEnter : Transition
popExit : Transition
pushEnter : Transition
pushExit : Transition
replaceEnter : Transition
replaceExit : Transition

付属プロパティ

index : int
status : enumeration
view : StackView
visible : bool (since QtQuick.Controls 2.2 (Qt 5.9))

アタッチドシグナル

activated() (since QtQuick.Controls 2.1 (Qt 5.8))
activating() (since QtQuick.Controls 2.1 (Qt 5.8))
deactivated() (since QtQuick.Controls 2.1 (Qt 5.8))
deactivating() (since QtQuick.Controls 2.1 (Qt 5.8))
removed() (since QtQuick.Controls 2.1 (Qt 5.8))

メソッド

void clear(transition)
Item find(callback, behavior)
Item get(index, behavior)
Item pop(item, operation)
Item popCurrentItem(operation) (since 6.7)
Item popToIndex(index, operation) (since 6.7)
Item popToItem(item, operation) (since 6.7)
Item push(item, properties, operation)
Item pushItem(item, properties, operation) (since 6.7)
Item pushItem(component, properties, operation) (since 6.7)
Item pushItem(url, properties, operation) (since 6.7)
Item pushItems(items, operation) (since 6.7)
Item replace(target, item, properties, operation)
Item replaceCurrentItem(items, operation) (since 6.7)
Item replaceCurrentItem(item, properties, operation) (since 6.7)
Item replaceCurrentItem(component, properties, operation) (since 6.7)
Item replaceCurrentItem(url, properties, operation) (since 6.7)

詳細説明

StackViewは、相互にリンクされた情報ページのセットで使用できます。例えば、電子メールアプリケーションでは、最新の電子メールのリスト、特定の電子メールの表示、添付ファイルのリスト/表示といった個別のビューがあります。電子メールリストビューは、ユーザーが電子メールを開くとスタックにプッシュされ、戻ることを選択するとポップアウトされます。

次のスニペットは、mainView 、関連するボタンをクリックするとスタックにプッシュされ、スタックからポップアウトされるというシンプルな使用例を示しています：

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true

    StackView {
        id: stack
        initialItem: mainView
        anchors.fill: parent
    }

    Component {
        id: mainView

        Row {
            spacing: 10

            Button {
                text: "Push"
                onClicked: stack.push(mainView)
            }
            Button {
                text: "Pop"
                enabled: stack.depth > 1
                onClicked: stack.pop()

            }
            Text {
                text: stack.depth
            }
        }
    }
}

アプリケーションでStackViewを使用する

アプリケーションでStackViewを使用することは、ウィンドウの子として追加するのと同じくらい簡単です。スタックは通常ウィンドウの端に固定されますが、上部や下部ではステータスバーや他の同様のUIコンポーネントに固定されます。スタックはそのナビゲーションメソッドを呼び出すことで使用できます。スタックビューに最初に表示される項目は、initialItem に割り当てられた項目です。initialItem が設定されていない場合は、一番上の項目です。

push （）、pop （）、replace （）。これらは古典的なスタック操作に対応しており、"push "はスタックの一番上にアイテムを追加し、"pop "はスタックから一番上のアイテムを削除します。"replace "はpopの後にpushを行うようなもので、一番上のアイテムを新しいアイテムで置き換えます。スタックの一番上のアイテムは、currently 画面上に表示されているアイテムに対応する。論理的には、"push "は前方、つまりアプリケーションUIの奥に移動し、"pop "は後方に移動し、"replace "はcurrentItem を置き換えます。

アイテムのプッシュ

次のアニメーションでは、push() 関数を使用して、3 つのLabel コントロールをスタックビューにプッシュしています：

スタックには次のアイテムが含まれます：[A, B, C].

注意： スタックが空の場合、push （）操作では、遷移するものがないため、遷移アニメーションはありません（通常、アプリケーションの起動時）。

アイテムのポップ

pop() を呼び出すと、スタックの一番上のアイテムが削除されます：

スタックには次の項目が含まれる。[A, B].

注：深さ1または0のスタックに対するpop （）操作は何もしない。このような場合、clear() メソッドを使用してスタックを空にできます。

ポップによるアイテムの巻き戻し

スタックを一段階以上さかのぼる必要がある場合がある。例えば、アプリケーションの "main" アイテムやある種のセクション・アイテムに戻る場合です。このような場合、pop() のパラメータとして項目を指定することができます。これは「巻き戻し」操作と呼ばれ、スタックは指定された項目まで巻き戻される。アイテムが見つからない場合、スタックは1つのアイテムが残るまで巻き戻され、それがcurrentItem になります。明示的にスタックの一番下まで巻き戻すには、pop （null）を使うことが推奨されますが、存在しないアイテムでもかまいません。

次のアニメーションでは、pop(null) を呼び出すことで、スタックを最初のアイテムまでアンワインドしている：

スタックには、[A] というアイテムがひとつ入っています。

アイテムの置き換え

次のアニメーションでは、D で一番上のアイテムをreplace している：

スタックには次のアイテムが含まれます:[A, B, D].

ディープリンク

ディープリンクとは、アプリケーションを特定の状態に起動することです。例えば、新聞アプリケーションは、一番上のアイテムをバイパスして、特定の記事を表示するように起動することができます。StackViewの観点では、ディープリンクはスタックの状態を変更する能力を意味し、スタックの最上位にアイテムのセットをプッシュしたり、スタックを所定の状態に完全にリセットしたりすることが可能です。

StackViewのディープリンクのためのAPIは、基本的なナビゲーションと同じです。単一のアイテムの代わりに配列をプッシュすると、その配列内のすべてのアイテムがスタックに追加されます。しかし、トランジションアニメーションは、配列の最後のアイテムにのみ適用されます。pushつまり、プッシュされたものはすべてスタックに追加される。

注意： 配列の最後の項目だけが読み込まれる。残りの項目がロードされるのは、その後のpop呼び出しや、get （）を使って項目を取得する要求があったときなど、必要なときだけである。

スタック[A,B,C]を考えると、次のようになる：

push([D, E, F]) => [A, B, C, D, E, F] - CとFの間の "push "トランジションアニメーション
replace([D, E, F]) => [A, B, D, E, F] - CとFの間のトランジション・アニメーションを「置き換える」。
clear() の後にpush([D, E, F]) => [D, E, F] - スタックが空だったため、アイテムをプッシュするトランジションアニメーションはありません。

アイテムの検索

アプリケーションが参照を持っていないアイテムは、find （）を呼び出すことで見つけることができる。このメソッドにはコールバック関数が必要です。コールバック関数は、一致するアイテムが見つかるまで、スタック内の各アイテムに対して（先頭から）呼び出されます。コールバック関数がtrue を返した場合、find() は停止し、一致する項目を返す。そうでない場合はnull が返される。

以下のコードでは、"order_id" という名前のアイテムをスタックから探し、そのアイテムまで巻き戻しています。

stackView.pop(stackView.find(function(item) {
    return item.name == "order_id";
}));

また、get(index)を使用して、スタック内のアイテムに到達することもできます。

previousItem = stackView.get(myItem.StackView.index - 1));

トランジション

プッシュやポップの操作ごとに、アイテムに入るときとアイテムから出るときに異なるトランジション・アニメーションが適用されます。これらのアニメーションは、入るアイテムがどのようにアニメーションし、出るアイテムがどのようにアニメーションするかを定義します。アニメーションは、StackView のpushEnter,pushExit,popEnter,popExit,replaceEnter,replaceExit プロパティに異なるTransitions を割り当てることでカスタマイズできます。

注意： トランジション・アニメーションはお互いのトランジション動作に影響を与えます。一方のアニメーションをカスタマイズして、もう一方のアニメーションを残すと、予期しない結果になる可能性があります。

次のスニペットは、プッシュとポップ操作のための単純なフェード遷移を定義しています：

StackView {
    id: stackview
    anchors.fill: parent

    pushEnter: Transition {
        PropertyAnimation {
            property: "opacity"
            from: 0
            to:1
            duration: 200
        }
    }
    pushExit: Transition {
        PropertyAnimation {
            property: "opacity"
            from: 1
            to:0
            duration: 200
        }
    }
    popEnter: Transition {
        PropertyAnimation {
            property: "opacity"
            from: 0
            to:1
            duration: 200
        }
    }
    popExit: Transition {
        PropertyAnimation {
            property: "opacity"
            from: 1
            to:0
            duration: 200
        }
    }
}

注: StackViewに追加されたアイテムにアンカーを使用することはサポートされていません。通常、push、pop、replaceトランジションは位置をアニメーション化しますが、アンカーが適用されている場合は不可能です。これはアイテムのルートにのみ適用されることに注意してください。子アイテムにアンカーを使用すると、期待通りに動作します。

アイテムの所有権

StackViewは自身が作成したアイテムの所有権のみを取ります。つまり、StackViewにプッシュされたアイテムがStackViewによって破棄されることはありません。Components またはURLs からStackViewが作成したアイテムだけが、StackViewによって破棄されます。StackViewがまたはから作成したアイテムだけがStackViewによって破棄されます。これを説明するために、以下の例のメッセージは、アイテムがスタックからポップされたときではなく、StackViewが破棄されたときにのみ表示されます：

Component {
    id: itemComponent

    Item {
        Component.onDestruction: print("Destroying second item")
    }
}

StackView {
    initialItem: Item {
        Component.onDestruction: print("Destroying initial item")
    }

    Component.onCompleted: push(itemComponent.createObject(window))
}

ただし、以下の例でURLとComponentから作成されたアイテムは、どちらもStackViewからポップオフされると、StackViewによって破棄されます：

Component {
    id: itemComponent

    Item {
        Component.onDestruction: print("Destroying second item")
    }
}

StackView {
    initialItem: "Item1.qml"

    Component.onCompleted: push(itemComponent)
}

サイズ

StackViewは、プッシュされたアイテムから暗黙のサイズを継承しません。これは、例えば、Dialog のcontentItem として使用すると、期待通りに動作しないことを意味します：

Dialog {
    StackView {
        initialItem: Rectangle {
            width: 200
            height: 200
            color: "salmon"
        }
    }
}

このような状況でStackViewが確実にサイズを持つようにするには、いくつかの方法があります：

implicitWidth 、implicitHeight をStackView自体に設定する。
Rectangle にimplicitWidth とimplicitHeight を設定する。
ダイアログにcontentWidth とcontentHeight を設定する。
ダイアログにサイズを与える。

Qtクイックコントロールの StackViewのカスタマイズ、StackViewでのナビゲーション、ナビゲーションコントロール、コンテナコントロール、フォーカス管理も参照してください 。

プロパティドキュメント

busy : bool [read-only]

このプロパティは、トランジションが実行中であるかどうかを保持します。

currentItem : Item [read-only]

このプロパティは、スタック内の現在の最上位の項目を保持します。

depth : int [read-only]

このプロパティは、現在スタックにプッシュされているアイテムの数を保持します。

empty : bool [read-only, since QtQuick.Controls 2.3 (Qt 5.10)]

このプロパティは、スタックが空であるかどうかを保持します。

このプロパティは、QtQuick.Controls 2.3 (Qt 5.10) で導入されました。

depthも参照してください。

initialItem : var

このプロパティは、StackView が作成されたときに表示される初期項目を保持します。初期項目は、Item 、Component 、またはurl のいずれかです。初期項目を指定することは、以下と同じです：

Component.onCompleted: stackView.push(myInitialItem)

push()も参照のこと 。

popEnter : Transition

このプロパティは、他の項目がスタックからポップ・オフされたときに、スタックに入る項目に適用される遷移を保持する。

StackViewのカスタマイズも参照してください 。

popExit : Transition

このプロパティは、アイテムがスタックからポップ・オフされた時に、スタックから出るアイテムに適用されるトランジションを保持します。

StackViewのカスタマイズも参照して ください。

pushEnter : Transition

このプロパティは、アイテムがスタックにプッシュされた時、スタックに入るアイテムに適用されるトランジションを保持します。

StackViewのカスタマイズも参照して ください。

pushExit : Transition

このプロパティは、他のアイテムがスタックにプッシュされた時、スタックから出るアイテムに適用されるトランジションを保持します。

StackViewのカスタマイズも参照して ください。

replaceEnter : Transition

このプロパティは、他のアイテムがそのアイテムに置き換えられた時にスタックに入るアイテムに適用されるトランジションを保持します。

StackViewのカスタマイズも参照して ください。

replaceExit : Transition

このプロパティは、スタックから出るアイテムが他のアイテムに置き換えられた時に、そのアイテムに適用されるトランジションを保持します。

StackViewのカスタマイズも参照して ください。

Attached プロパティの説明

StackView.index : int [read-only]

この Attached プロパティは、アタッチされているアイテムのスタックインデックスを保持し、アイテムがスタックにない場合は、-1 。

StackView.status : enumeration [read-only]

この Attached プロパティは、アタッチされているアイテムのスタックステータスを保持し、アイテムがスタックにない場合は、StackView.Inactive 。

利用可能な値：

定数	説明
`StackView.Inactive`	アイテムは非アクティブです（またはスタックにありません）。
`StackView.Deactivating`	アイテムは非アクティブ化（ポップオフ）されています。
`StackView.Activating`	アイテムがアクティブになっている（カレントアイテムになっている）。
`StackView.Active`	アイテムがアクティブ、つまりカレントアイテムである。

StackView.view : StackView [read-only]

このアタッチされたプロパティは、アタッチされたアイテムのスタックビューを保持し、アイテムがスタックにない場合は、null 。

StackView.visible : bool [since QtQuick.Controls 2.2 (Qt 5.9)]

このアタッチされたプロパティは、それがアタッチされているアイテムの可視性を保持する。値はItem::visible の値に従う。

デフォルトでは、StackView は、入力トランジションが始まると入力アイテムを表示し、終了トランジションが終わると出力アイテムを非表示にします。このプロパティを明示的に設定することで、デフォルトの動作を上書きすることができ、最上位のアイテムより下にあるアイテムを表示し続けることが可能になります。

注意: ほとんどのスタイルのデフォルトの遷移は、ビューの外に出ていくアイテムをスライドさせ、その不透明度をアニメーション化することもあります。アイテムの完全なスタックを表示し続けるには、transitions をカスタマイズして、下のアイテムが見えるようにすることを検討してください。

StackView {
    id: stackView
    property real offset: 10
    width: 100; height: 100

    initialItem: Component {
        id: page
        Rectangle {
            property real pos: StackView.index * stackView.offset
            property real hue: Math.random()
            color: Qt.hsla(hue, 0.5, 0.8, 0.6)
            border.color: Qt.hsla(hue, 0.5, 0.5, 0.9)
            StackView.visible: true
        }
    }

    pushEnter: Transition {
        id: pushEnter
        ParallelAnimation {
            PropertyAction { property: "x"; value: pushEnter.ViewTransition.item.pos }
            NumberAnimation { properties: "y"; from: pushEnter.ViewTransition.item.pos + stackView.offset; to: pushEnter.ViewTransition.item.pos; duration: 400; easing.type: Easing.OutCubic }
            NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 400; easing.type: Easing.OutCubic }
        }
    }
    popExit: Transition {
        id: popExit
        ParallelAnimation {
            PropertyAction { property: "x"; value: popExit.ViewTransition.item.pos }
            NumberAnimation { properties: "y"; from: popExit.ViewTransition.item.pos; to: popExit.ViewTransition.item.pos + stackView.offset; duration: 400; easing.type: Easing.OutCubic }
            NumberAnimation { property: "opacity"; from: 1; to: 0; duration: 400; easing.type: Easing.OutCubic }
        }
    }

    pushExit: Transition {
        id: pushExit
        PropertyAction { property: "x"; value: pushExit.ViewTransition.item.pos }
        PropertyAction { property: "y"; value: pushExit.ViewTransition.item.pos }
    }
    popEnter: Transition {
        id: popEnter
        PropertyAction { property: "x"; value: popEnter.ViewTransition.item.pos }
        PropertyAction { property: "y"; value: popEnter.ViewTransition.item.pos }
    }
}

このプロパティは QtQuick.Controls 2.2 (Qt 5.9) で導入されました。