QML StackView类

最新推荐文章于 2024-08-24 22:04:46 发布

远方是什么样子

最新推荐文章于 2024-08-24 22:04:46 发布

阅读量2.2k

点赞数 1

分类专栏： QML 文章标签： qml

原文链接：https://doc.qt.io/qt-6/qml-qtquick-controls2-stackview.html

版权

QML 专栏收录该内容

29 篇文章 10 订阅

订阅专栏

导入	import QtQuick.Controls 2.1
继承	Control

Properties

busy : bool
currentItem : Item
depth : int
empty : bool
initialItem : var
popEnter : Transition
popExit : Transition
pushEnter : Transition
pushExit : Transition
replaceEnter : Transition
replaceExit : Transition

Attached Properties

index : int
status : enumeration
view : StackView
visible : bool

Attached Signals

activated ()
activating ()
deactivated ()
deactivating ()
removed ()

Methods

void clear (transition)
Item find (callback, behavior)
Item get (index, behavior)
Item pop (item, operation)
Item push (item, properties, operation)
Item replace (target, item, properties, operation)

细节描述
在这里插入图片描述

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中显示的第一个项是分配给initialItem的项，如果initialItem没有设置，则是最上面的项。

StackView支持三个主要的导航操作:push()、pop()和replace()。这些对应于经典的堆栈操作，“push”将一个项目添加到堆栈顶部，“pop”将顶部项目从堆栈中移除，而“replace”类似于pop后跟push，用新项目替换最顶部的项目。堆栈中最上面的项对应于当前在屏幕上可见的项。从逻辑上讲，“push”向前移动插入到后面，“pop”向后移动删除，而“replace”替换了currentItem。

Pushing Items
在下面的动画中，三个Label控件通过push()函数被推到堆栈视图中:
在这里插入图片描述
堆栈现在包含以下项:[A, B, C]。

注意：当堆栈为空时，push()操作不会有转换动画，因为没有什么可以转换(通常是在应用程序启动时)。

Popping Items
继续上面的例子，通过调用pop()来移除堆栈上最上面的项:
在这里插入图片描述
堆栈现在包含以下项:[A, B]。

注意：对于深度为1或0的堆栈，pop()操作什么也不做。在这种情况下，可以使用clear()方法清空堆栈。

有时，有必要返回堆栈中的多个步骤。例如，返回到应用程序中的“主”项或某种类型的节项。在这种情况下，可以将item指定为pop()的参数。这称为“展开”操作，栈展开到指定的项为止。如果没有找到项目，stack将展开，直到剩下一个项目，该项目成为currentItem。要显式地展开到堆栈的底部，建议使用pop(null)，尽管任何不存在的项都可以。

在下面的动画中，我们通过调用pop(null)将堆栈展开到第一项:
在这里插入图片描述
堆栈现在包含一个单一的项目:[a]。

Replacing Items
在下面的动画中，我们将最上面的项替换为D:
在这里插入图片描述
该堆栈现在包含以下项目:[A, B, D]。

深层链接
StackView中用于深度链接的API与用于基本导航的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] - 当堆栈为空时，没有推入项目的过渡动画。

查找item
可以通过调用find()来找到应用程序没有引用的Item。该方法需要一个回调函数，它将为堆栈中的每个项调用(从顶部开始)，直到找到匹配项。如果回调返回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));

动画
对于每个push或pop操作，不同的过渡动画应用于进入和退出项。这些动画定义了进入的项目应该如何动画化，退出的项目应该如何动画化。动画可以通过为StackView的pushEnter、pushExit、popEnter、popExit、replaceEnter和replaceExit属性分配不同的过渡来定制。

注意：过渡动画影响彼此的过渡行为。为其中一个定制动画而留下另一个可能会产生意想不到的结果。

下面的代码段为push和pop操作定义了一个简单的淡出转换:

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转换会使位置动画化，这在应用锚点时是不可能的。请注意，这只适用于项的根。为它的子节点使用锚点的工作如预期的那样。

item所有权
StackView只接受它自己创建的项目的所有权。这意味着任何推送到StackView的项目将永远不会被StackView销毁;只有StackView从组件或url创建的项目才会被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和组件中创建的两个项目都将在弹出时被StackView销毁:

Component {
    id: itemComponent

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

StackView {
    initialItem: "Item1.qml"

    Component.onCompleted: push(itemComponent)
}

大小
StackView不会从推入它的项中继承隐式的大小。这意味着使用它作为一个对话框的内容，例如，将不能按预期工作:

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

在这种情况下，有几种方法可以确保StackView有一个大小:
1.在StackView本身上设置implicitWidth和implicitHeight。
2.在矩形上设置implicitWidth和implicitHeight。
3.设置对话框的contentWidth和contenttheight。
4.给对话框一个大小。

属性
busy : bool
此属性保存转换是否正在运行。【只读】

currentItem : Item
此属性保存堆栈中当前最顶层的项。

depth : int

empty : bool

initialItem : var

popEnter : Transition

popExit : Transition

pushEnter : Transition

pushExit : Transition

replaceEnter : Transition

replaceExit : Transition

附加属性
index : int

status : enumeration

view : StackView

visible : bool

附加信号
activated ()

activating ()

deactivated ()

deactivating ()

removed ()

方法
void clear (transition)

Item find (callback, behavior)

Item get (index, behavior)

Item pop (item, operation)

Item push (item, properties, operation)

Item replace (target, item, properties, operation)