QML控件类型：StackView

最新推荐文章于 2024-08-24 22:04:46 发布
最新推荐文章于 2024-08-24 22:04:46 发布
阅读量4.3k 收藏 20
点赞数 5
分类专栏： # QML控件类型 文章标签： qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kenfan1647/article/details/125276521
版权

一、描述

StackView 提供栈式导航。它的特点是用类似于栈的方式管理一系列界面，这些界面之间可能有内在联系，根据业务需要，可以一级一级向前面跳转或返回后面的界面。

import QtQuick
import QtQuick.Controls

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: "一个界面进栈"
                onClicked: stack.push(mainView)
            }
            Button {
                text: "一个界面出栈"
                enabled: stack.depth > 1
                onClicked: stack.pop()

            }
            Text {
                text: "当前界面的栈深度：" + stack.depth
            }
        }
    }
}

StackView 不会从 push() 到它的项目中继承隐式大小。下面的 Dialog 的 contentItem 将无法按预期工作：

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

二、属性成员

1、【只读】busy : bool

转换是否正在运行。

2、【只读】currentItem : Item

堆栈中当前最顶层的项目。

3、【只读】depth : int

当前堆栈中的项目数。

4、【只读】empty : bool

堆栈是否为空。

5、initialItem : var

创建 StackView 时应显示的初始项。可以是 Item、Component 或 url。

指定初始项等效于：

Component.onCompleted: stackView.push(myInitialItem)

6、popEnter : Transition

当一个项目从堆栈中弹出时应用于进入堆栈顶部的项目的转换。

import QtQuick
import QtQuick.Controls

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

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

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

            PropertyAnimation {
                property: "y"
                from: 100
                to:0
                duration: 200
            }
        }
    }

    Component {
        id: mainView

        Row {
            spacing: 10

            Button {
                text: "一个界面进栈"
                onClicked: stack.push(mainView)
            }
            Button {
                text: "一个界面出栈"
                enabled: stack.depth > 1
                onClicked: stack.pop()

            }
            Text {
                text: "当前界面的栈深度：" + stack.depth
                Component.onDestruction: print("销毁item")
            }
        }
    }
}

7、popExit : Transition

当项目从堆栈中弹出时应用于退出堆栈的项目的转换。

import QtQuick
import QtQuick.Controls

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

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

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

            PropertyAnimation {
                property: "y"
                from: 0
                to:100
                duration: 200
            }
        }
    }

    Component {
        id: mainView

        Row {
            spacing: 10

            Button {
                text: "一个界面进栈"
                onClicked: stack.push(mainView)
            }
            Button {
                text: "一个界面出栈"
                enabled: stack.depth > 1
                onClicked: stack.pop()

            }
            Text {
                text: "当前界面的栈深度：" + stack.depth
                Component.onDestruction: print("销毁item")
            }
        }
    }
}

8、pushEnter : Transition

在项目被推入堆栈时应用于进入堆栈的项目的转换。

import QtQuick
import QtQuick.Controls

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

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

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

            PropertyAnimation {
                property: "y"
                from: 100
                to:0
                duration: 200
            }
        }
    }

    Component {
        id: mainView

        Row {
            spacing: 10

            Button {
                text: "一个界面进栈"
                onClicked: stack.push(mainView)
            }
            Button {
                text: "一个界面出栈"
                enabled: stack.depth > 1
                onClicked: stack.pop()

            }
            Text {
                text: "当前界面的栈深度：" + stack.depth
                Component.onDestruction: print("销毁item")
            }
        }
    }
}

9、pushExit : Transition

项目被推入堆栈时应用于退出堆栈顶部的项目的转换。

import QtQuick
import QtQuick.Controls

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

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

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

            PropertyAnimation {
                property: "y"
                from: 0
                to:100
                duration: 200
            }
        }
    }

    Component {
        id: mainView

        Row {
            spacing: 10

            Button {
                text: "一个界面进栈"
                onClicked: stack.push(mainView)
            }
            Button {
                text: "一个界面出栈"
                enabled: stack.depth > 1
                onClicked: stack.pop()

            }
            Text {
                text: "当前界面的栈深度：" + stack.depth
                Component.onDestruction: print("销毁item")
            }
        }
    }
}

10、replaceEnter ：Transition

当项目A被另一个项目B替换时应用于项目B的转换。

11、replaceExit : Transition

当项目A被另一个项目B替换时应用于项目A的转换。

三、附加属性成员

1、【只读】StackView.index : int

所附加到的项目的堆栈索引，如果项目不在堆栈中，则为 -1。

2、【只读】StackView.status : enumeration

附加的项目的堆栈状态，如果项目不在堆栈中，则为 StackView.Inactive。

  • StackView.Inactive：非活动状态（或不在堆栈中）。
  • StackView.Deactivating：正在被停用（弹出）。
  • StackView.Activating：正在被激活（成为当前项目）。
  • StackView.Active：处于活动状态，即当前项。

3、【只读】StackView.view : StackView

所附加到的项目的堆栈视图，如果项目不在堆栈中，则为 null。

4、StackView.visible : bool

所附加的项目的可见性。

四、附加信号成员

1、activated()

当附加到的项目在堆栈中被激活时，会发出此附加信号。

2、activating()

当附加到的项目正在堆栈中被激活时，会发出此附加信号。

3、deactivated()

当附加到的项目在堆栈中被停用时，会发出此附加信号。

4、deactivating()

当附加到的项目正在堆栈中被移除时，会发出此附加信号。

5、removed()

当附加到的项目已从堆栈中删除时，会发出此附加信号。它可用于安全地销毁被压入堆栈的 Item，例如：

Item {
    StackView.onRemoved: destroy()
}

五、成员函数

1、void clear(transition)

从堆栈中移除所有项目。可以选择指定转换。支持的转换：

  • StackView.Immediate：立即清除堆栈而不进行任何转换（默认）。
  • StackView.PushTransition
  • StackView.ReplaceTransition
  • StackView.PopTransition
import QtQuick
import QtQuick.Controls

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

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

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

            PropertyAnimation {
                property: "y"
                from: 0
                to:100
                duration: 200
            }
        }
    }

    Component {
        id: mainView

        Row {
            spacing: 10

            Button {
                text: "一个界面进栈"
                onClicked: stack.push(mainView)
            }
            Button {
                text: "一个界面出栈"
                enabled: stack.depth > 1
                onClicked: stack.pop()
            }
            Button {
                text: "clear"
                onClicked: stack.clear(StackView.PushTransition)
            }
            Text {
                text: "当前界面的栈深度：" + stack.depth
                Component.onDestruction: print("销毁item")
            }
        }
    }
}

2、Item find(callback, behavior)

搜索特定项目。为堆栈中的每个项目调用回调函数 callback（将项目和索引作为参数），直到回调函数返回 true。返回值是找到的项目。例如：

stackView.find(function(item, index) {
    return item.isTheOne
})

参数二：

  • StackView.DontLoad：未加载的项目被跳过（不为它们调用回调函数）。
  • StackView.ForceLoad：卸载的项目被强制加载。

3、Item get(index, behavior)

返回堆栈中位置 index 处的项目，如果索引超出范围，则返回 null。

4、Item pop(item, operation)

从堆栈中弹出一个或多个项目。返回从堆栈中删除的最后一项。

参数二见上面的 clear()，默认为 StackView.PopTransition。

5、Item push(item, properties, operation)

将项目推入堆栈，并可选择在项目上应用一组属性。返回成为当前的项目。

stackView.push(rect)

stackView.push(rect, {"color": "red"})

可以通过将多个项目作为附加参数或作为数组传递来同时推送多个项目。最后一项成为当前项。 每个项目后面都可以跟一组要应用的属性：

stackView.push(rect1, rect2, rect3)

stackView.push(rect1, {"color": "red"}, rect2, {"color": "green"}, rect3, {"color": "blue"})

推入一组项目：

stackView.push([rect1, rect2, rect3])

stackView.push([rect1, {"color": "red"}, rect2, {"color": "green"}, rect3, {"color": "blue"}])

参数三见上面的 clear()，默认为 StackView.PushTransition。

6、Item replace(target（被替换者）, item（替换者）, properties, operation)

替换堆栈上的一个或多个项目，并可选择在项目上应用一组属性。返回成为当前的项目。

如果指定了 target 参数，则替换该项目项目。如果 target 为 null，则堆栈中的所有项目都将被替换。如果未指定，则仅替换顶部的项目。

如果替换项是 Component 或 url，StackView 会自动创建一个实例。

参数三指定替换项的初始属性值映射。

替换栈顶的项目：

stackView.replace(rect)

stackView.replace(rect, {"color": "red"})

可以通过将多个项目作为附加参数或作为数组传递来同时替换多个项目。 每个项目后面都可以跟一组要应用的属性。

传递可变数量的参数：

stackView.replace(rect1, rect2, rect3)

stackView.replace(rect1, {"color": "red"}, rect2, {"color": "green"}, rect3, {"color": "blue"})

替换一组项目：

stackView.replace([rect1, rect2, rect3])

stackView.replace([rect1, {"color": "red"}, rect2, {"color": "green"}, rect3, {"color": "blue"}])

参数四见上面的 clear()，默认为 StackView.ReplaceTransition。

以下示例使用 replace() 来使用 push 和 pop 转换。

import QtQuick
import QtQuick.Controls

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

    StackView {
        id: stackView
        anchors.fill: parent

        initialItem: Component {
            id: page

            Page {
                Row {
                    spacing: 20
                    anchors.centerIn: parent

                    Button {
                        text: "<"
                        onClicked: stackView.replace(page, StackView.PopTransition)
                    }
                    Button {
                        text: ">"
                        onClicked: stackView.replace(page, StackView.PushTransition)
                    }
                }
            }
        }
    }
}

友善啊，朋友
关注
专栏目录
QML进阶(十二)QML中几种常见应用模式
yang1fei2的博客
05-19 3495
目录 左右滑动窗口(SwipeView) 堆叠窗口(StackView) 多文档窗口(DocumentWindow) 虽然QML的界面定义非常灵活，但是我们在开发应用的时候也是有固定套路的。下面介绍一下QML应用的几种固定模式，分别是:SwipeView、StackView、DocumentWindow。SwipeView窗口是一种可以通过鼠标或者手指左右滑动来实现窗口切换的视图结构，常见于移动端应用。StackView是一种堆叠层次的窗口结构，用户可以通过按键和菜单的响应操作，切换堆叠结构中的
QML_栈式导航模型StackView
会选科技的博客
06-11 1514
QML_栈式导航模型StackView
QML 界面切换的方法
最新发布
u013798595的博客
08-24 577
StackView：适用于复杂的界面堆叠和导航场景。Loader：适合动态加载和切换不同的 QML 组件。Repeater 和 StackLayout：用于动态生成和管理多个类似界面。States 和 Transitions：适用于状态驱动的视图切换和动画效果。
Qt/QML学习-StackView
QT、QML
08-17 772
Qt/QML学习-StackView
【QML】StackView控制其他页面的组件
-凌凌漆-的博客
11-27 147
StackView当前页面的按键被触发，需要控制其他页面（前面的页面）的组件。
qml stackview实现安卓back键返回 和正常状态下的双击退出（全局过滤）
08-09
实现qml的全局过滤
QML之StackView
LC900730的博客
09-01 5466
QML中SatckViewStackView管理着view页面的生命周期，提供了页面的栈式导航。这些view页面可能有业务需要，根据业务需要，可以一级一级向深处跳转，根据当前view的状态与设定的情况，可能产生一个新view或者返回之前view比如：注册账号分步骤，输入用户名，密码，点击下一步之后，出现新页面，输入兴趣爱好等//定义一个StackViewApplicationWindow{
QML StackView类
weixin_42948436的博客
05-29 2217
导入 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 : Tran...
qml之StackView
cqltbe131421的博客
03-23 1342
案例1：import QtQuick 2.7 import QtQuick.Window 2.2 import QtQuick.Controls 1.4 Window { id:root visible: true width: 640 height: 480 title: qsTr("Hello World") StackView {
qml组件学习-StackView
godaa的博客
03-17 878
StackView：类似于栈的视图 演示代码： import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.2 Window { width: 640 height: 480 visible: true title: qsTr("Hello World") StackView{ //类似于栈的结构，最后进栈的视图在最上面显示，下面的视图被上面的视图覆盖不显示
QML中使用StackView实例
斧冰
03-21 7058
参考：https://blog.csdn.net/cqltbe131421/article/details/83148918 这个是简单的应用。 原作者在github上放上了源码，能在实际中用，方便进行子界面切换： 地址：https://github.com/cedoduarte/QML_StackView_example 上代码： main.qml文件： import QtQuick 2.9 i...
Qml堆栈窗体QmlStackView.7z
11-22
Qml堆栈窗体QmlStackView.7z
qt-quick QML页面跳转
07-09
stackView.push("Page2.qml") // 切换到Page2.qml stackView.pop() // 回到上一个页面 ``` ### 多页面跳转 多页面跳转涉及多个独立的QML文件，每个文件代表一个单独的页面。在这种情况下，可以使用`NavigationPane...
qml中，如何使用 StackView 在已有的堆栈页面中来回切换
04-07
在 QML 中使用 StackView 控件来实现页面堆栈的切换，可以按照以下步骤进行： 1. 创建一个 StackView 控件，并设置其 id 和初始页面： ``` StackView { id: stackView initialItem: page1 } ``` 2. 创建堆栈中...
QML进阶(十)动态加载QML元素
yang1fei2的博客
05-15 3332
通过搭配QML和JavaScript我们可以动态的对QML元素的生命周期进行管理。实现动态加载元素、动态实例化元素、动态销毁元素。同时我们还可以将动态创建的元素持久化到本地，并在需要的时候进行恢复使用。 通过Loader元素实现动态加载 通过QML提供的Loader元素实现动态加载是动态加载最简单的方式。Loader相当于提供了一个元素的加载容器，通过指定该元素的source属性，我们可以加载固定URL地址的元素，通过指定该元素的sourceComponent属性，我们可以实例化一个组件。 在动态
Qt qml StackView and GridView and Loader
XiaoHG_CSDN的博客
05-09 426
Qt qml StackView and GridView main: loader component //main.qml import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.0 Window { id: root width: 800 height: 480 visible: true title: qsTr("Hello World") Rectangle
8.QML Qt Quick Controls 2中常用的界面形式——堆叠式界面（StackView）
Master Cui的博客
12-12 1517
堆叠式界面的实现的核心组件就是StackView。StackView是一个基于栈的导航浏览模型，可以与一组关联的页面一起使用。当用户浏览深层页面时，深层页面被推到栈顶，当用户选择返回时，之前浏览的页面会再次弹出。 堆叠式界面的效果 上述演示中，界面一共有四个：分别是home、profile、about和editprofile 上述四个界面中使用的核心组件是Page，该组件在QtQuick.Controls中，Page是一个容器控件，可以方便地添加页眉、页脚以及其他item。 上述四个界面的实现如
Qt基于Qml堆栈(StackView)窗口使用示例
11-02 1192
Qt基于Qml堆栈(StackView)窗口使用示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值