Question

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

Answer 1

　　1）使用PageStack来完成

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

　　

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

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

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

　　[html] view plaincopy在CODE上查看代码片派生到我的代码片
　　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
　　}
　　}