如何在QML中使用ListView并导航到其它页面中

我们知道ListView在QML应用中扮演非常重要的角色。看看我们的很多的应用都是在使用ListView。那么当我们点击ListView中的item并导航到另外一个页面呢?其实这样的方法有很多。在这篇文章中,我们来介绍其中的几种。开发者可以参照其中的设计,或自己想出更好的设计。

1)使用PageStack来完成

在我们的RssReader中的例子中,我们使用了PageStack来完成我们的导航。我们可以把我们的每个页面都做成我们的Page。当我们的页面被点击后,我们把新的Page压入栈中。在返回时,我们只需要点击返回按钮即可:

 
   

我们可以在我的例程中找到相应的代码。

2)使用一个不可见的显示在需要时显示出来

在我们的使用中,我们使用两个重叠在一起的窗口,但是每次只有一个才能显示。在默认的情况下,我们显示ListView,当点击ListView中的item后,显示详细的页面:

        ListView {
            id: listview

            clip: true
            anchors.fill: parent
            model:mymodel

            header: Text {
                text: "This is the header"
                font.pixelSize: 30

                Rectangle {
                    anchors.top: parent.bottom
                    width: listview.width
                    height: units.gu(0.4)
                    color: "blue"
                }
            }

            delegate: MyDelegate {}

            footer: Text {
                text: "This is the footer"
                font.pixelSize: 30
            }
        }

        Item {
            id: popup
            visible: false
            clip: true
            property url loadUrl
            onLoadUrlChanged: {
                opacity = 0;
                visible = (loadUrl == '' ? false : true);
                console.log("opacity: " + opacity );
                console.log("visible: " + visible );
            }
            anchors.fill: parent
            Rectangle {
                id: bg
                anchors.fill: parent
                color: "white"
            }
            MouseArea{
                anchors.fill: parent
                enabled: popup.visible
                //Eats mouse events
            }
            Loader{
                focus: true
                source: popup.loadUrl
                width: parent.width
                height: parent.height -toolbar.height
            }

            Rectangle {
                id: toolbar
                width: parent.width
                height: units.gu(4)
                anchors.bottom: parent.bottom
                color: "blue"

                Icon {
                    name: "previous"
                    width: units.gu(3.5)
                    height: units.gu(3.5)

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            popup.loadUrl = "";
                            ani.running = true;
                        }
                    }
                }
            }

            NumberAnimation on opacity {
                id: ani
                from: 0
                to: 1
                duration: 3000
            }
        }
    }

在上面的代码中,默认的情况下,我们试popup为不可见,它和listview是重叠在一起的。当item被点击后,我们才修改它为可见。这个代码在MyDelegate中实现的:

import QtQuick 2.0

Item {
    property Item item

    width: listview.width
    height: units.gu(8)
    Text {
        id: text
        text: title
        anchors.verticalCenter: parent.verticalCenter
        anchors.leftMargin: units.gu(10)
        font.pixelSize: 30

    }

    Rectangle {
        anchors.top: text.bottom
        width: parent.width
        height: units.gu(0.2)
        color: "gray"
    }

    Image {
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        source: "images/arrow.png"
        rotation: -90
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("it is clicked");
            popup.loadUrl = "ExampleQml.qml"
        }
    }
}

  

代码在地址 git clone https://gitcafe.com/ubuntu/listview_visible.git

3)使用一个左右结构的页面,每次只有一个页面显示

同样的方法,我们可以使用一个左右排列的两个页面。每个页面的大小和主屏是一样大小的。但是,只有一个页面在不同的时间显示。我们可以通javascript来控制什么时候显示哪个页面。我们可以通过改变x坐标来显示我们所需要的页面。可以结合动画来展示效果:

        Row {
            id: view

            ListView {
                id: listview

                clip: true
                width: root.width
                height: root.height
                model:mymodel

                header: Text {
                    text: "This is the header"
                    font.pixelSize: 30

                    Rectangle {
                        anchors.top: parent.bottom
                        width: listview.width
                        height: units.gu(0.4)
                        color: "blue"
                    }
                }

                delegate: MyDelegate {}

                footer: Text {
                    text: "This is the footer"
                    font.pixelSize: 30
                }
            }

            // This is the second page
            DetailedPage {
                id: detailPage
                width: root.width
                height: root.height
            }

            Behavior on x {
                 NumberAnimation { duration: 500 }
            }
        }

通过使用Row来把两个页面并列显示,但是,每次只显示其中的一个页面。当点击ListView中的item后,改变当前view的x坐标来显示另外一个页面。这个是通过MyDelegate来改变的:

import QtQuick 2.0

Item {
    property Item item

    width: listview.width
    height: units.gu(8)
    Text {
        id: text
        text: title
        anchors.verticalCenter: parent.verticalCenter
        anchors.leftMargin: units.gu(10)
        font.pixelSize: 30

    }

    Rectangle {
        anchors.top: text.bottom
        width: parent.width
        height: units.gu(0.2)
        color: "gray"
    }

    Image {
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        source: "images/arrow.png"
        rotation: -90
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
//            popup.loadUrl = "ExampleQml.qml"
            view.x = -root.width;
        }
    }
}

  

所有的源码在: git clone https://gitcafe.com/ubuntu/listview.git

时间: 2024-10-08 13:41:25

如何在QML中使用ListView并导航到其它页面中的相关文章

回发或回调参数无效。在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验证。

回发或回调参数无效.在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEventValidation="true" %> 启用了事件验证.出于安全目的,此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件.如果数据有效并且是预期的,则使用 ClientScriptManager.RegisterForEventValidation 方法来注册

php中调用这个功能可以在web页面中显示hello world这个经典单词

php程序写的时间长了,自然对他所提供的功能了如指掌,他所提供的一大堆功能,真是觉得很好用,但有时候会发现php也缺少一些功能,自己总是会产生为php添加一些自定义的功能的想法.久而久之,终于今天憋不住了,开始动手研究如何添加. 下载一个php的源代码包,这里使用的是php 4.0.5版,解压后会看到php的根目录下会有README.EXT_SKEL这样一个文件,打开详细阅读了一下,发现了一个非常好用的工具,这个工具可以帮你构建一个空的php扩展,然后你向里面添加相应的代码就可以完成你自己的功能

如何在QML中设计一个expandable ListView

在前面的文章"如何在QML中使用ListView并导航到其它页面中"中,我们已经介绍了各种在ListView中导航到其它页面的方法.在这篇文章中,我来介绍如何建立一个expandable的ListView.通过这样的方法,ListView可以不用导航到其它的页面中,但是它可以通过状态的控制占据整个页面,而得到显示. 首先我们可以使用Ubuntu SDK来创建一个最简单的"QML App with Simple UI (qmlproject)"项目.我们的Main.q

利用js查找页面中的内链,外链

起初没听说过内链外链,只有链接锚文本,在面试中被问到如何查找到页面中的内链和外链,就在想,什么是内链和外链啊??????? 后来面试官给我解释了一下他们的区别,自己稍微懂了,自己当时回答的是通过获取a标签的href属性,查找字符串中是否存在href,后来又被问到如果用选择器怎么用呢?自己不会.... 后来下来又想到这个问题,觉得自己猪啊,有属性选择器来匹配,但是当时为什么回答不上来,因为这个是css3中的,自己只知道,但是不太经常用,所以第一反应没有想到,归根结底还是个熟练度的问题,没有达到熟悉

页面中查询模块的设计与实现思路

在做一个物品的展示管理页面,想把增删改查都放到页面中,用axure画了一个页面,比较简单,主要分为上下两部分,上半部分是查询模块,下半部分是表格,用来展示数据.新增按钮单独在页面中,修改按钮在表的每一行数据后面,删除按钮在表格下面,将表格中的数据每一行设为可选,选择后进行删除操作.查询部分没有考虑很多,只是列了几个物品的主要属性,有下拉框有文本框,可选可填,然后查询,其实默认的就是这些查询条件之间是"与"的关系. 图1 自己设计的查询模块??项目在讨论的时候,技术领导说了一下这个地方设

Vue ---在for循环修改页面中某个值,页面没有及时刷新问题(使用this.$forceUpdate()解决)

最近使用vue开发时,在一个函数中使用for循环,改变了页面中的值,在函数中查看是修改成功的,但是页面中没有及时刷新. 解决方法: 运用this.$forceUpdate()强制刷新. export default { data() { return { dataList:[], }; }, methods: { getData() { var _this = this; var dataList = []; dataList = response.data.data; for(var i=0;

如何在QML应用中启动Scope

在这篇文章中,我们将介绍如何在QML应用中调用Scope,并把搜索的关键词传进去.这对有些QML应用需要用到Scope的情况非常有用.更多关于url-dispatcher的知识,请在文章"使用URL dispatcher的范例"看到. Scope ID 首先我们来讲一下什么是Scope ID.我们打开我们创建的任何一个Scope的manifest.json文件: { "architecture": "@[email protected]", &q

如何在QML应用中动态修改ListModel中的数据并存储它为JSON格式

我们知道JSON数据格式被广泛使用在很多的应用中,它可以帮我们保存我们应用的设置数据等.在QML中的ListView或GridView中,我们使用ListModel来显示它里面的数据.这个数据可以来源于xml或JSON.在ListView或GridView中,我们也可以动态修改ListModel中的数据.那么我们将如何保存这个数据呢?本篇文章也同样适用于xml格式的保存.这个练习就留个开发者自己了.当然保存ListModel中的数据也可以使用到SQLite数据库.这个因人而已! 为了方便我们的设

Android如何在ListView中嵌套ListView

前几天因为项目的需要,要在一个ListView中放入另一个ListView,也即在一个ListView的每个ListItem中放入另外一个ListView.但刚开始的时候,会发现放入的小ListView会显示不完全,它的高度始终有问题.上网查了下,发现别人也有遇到这样的问题,而大多数人都不推荐这样的设计,因为默认情况下Android是禁止在ScrollView中放入另外的ScrollView的,它的高度是无法计算的. 又搜索了一下,发现有StackOverflow上的牛人已经解决了这个问题,经过