QtQuick项目界面跳转怎的实现

QtQuick项目界面跳转怎样实现
想要模拟手机屏幕的设计，点击不同按键打开不同界面，并能对界面进行操作。
我个人目前只会实现到点击不同按键打开相同界面，想向各位请教一下
下面是我的代码，再怎样实现，求解决
main.qml
import QtQuick 1.0
import com.nokia.symbian 1.0
import "connect"//引入connect进行关联

Window {
id: window

StatusBar {
id: statusBar
width: 360
height: 45
anchors.top: window.top
}
Rectangle {
id: bluetooth
x: 0
y: 45
width: 360; height: 595
color: "black"
ListModel {
id:viewModel
ListElement {title: "开启蓝牙"}
ListElement {title: "本机可见性"}
ListElement {title: "配对设备"}
ListElement {title: "我的手机名"}
ListElement {title: "帮助"}
}
ListView {
id: listView
visible: true
anchors.fill: parent
model:viewModel//调用与之相关的model
delegate: ViewModel{}
}
}
}

ViewModel.qml
import QtQuick 1.0

Component {//组件
id: menuDelegate
Item {
id: menu
property real detailsOpacity : 0
width: listView.width
height: 70

Rectangle {
id: background
x: 2;
y: 2;
width: parent.width - x*2;
height: parent.height - y*2
color: "ivory"
border.color: "red"
radius: 5
}
MouseArea {//鼠标感应区

anchors.fill: parent
onClicked: menu.state = 'View';//当点击按键时执行View状态
}

Text {//主界面上的字体显示
text: title
font.bold: true;
verticalAlignment: Text.AlignVCenter;
horizontalAlignment: Text.AlignHCenter;
font.pointSize: 16
color: "blue"
}

states: State {
name: "View"
PropertyChanges {
target: menu;
detailsOpacity: 1;
x: 0
} //更改可见性，只使需要展现的menu可见
PropertyChanges {
target: menu;
height: listView.height
} //使点击的列图填满整个列表的详细视图

PropertyChanges {
target: menu.ListView.view;
explicit: true;
contentY: menu.y
} //移动单个列表位置，使其铺满整个视图
}
}
}

[解决办法]
Page Based Application Navigation是一个基于页面栈的导航功能，与滑屏无关。

楼主怎么会做出只针对滑屏的判断呢？文档上在醒目的位置给出了Page Navigation with ToolBars的示例，这已经足够说明问题了。

楼主应该仔细阅读，并且进行一些试验。
[解决办法]
最简单的，当你点击比如蓝牙按钮的时候，你让你的蓝牙的界面的visible为ture，或者是设置其x或者y为适当的值，然后添加相应的动画就好了

可以参考我写的一个圣经阅读器：
https://gitorious.org/raamattu/raamattu
[解决办法]

引用:

我会更改一些属性之类的，关键是不会他们之间怎样关联起来

那就看PageStack::push(page, properties, immediate)的第二个参数。

在你的Page里定义属性，类似：

property alias message: label.text
Page {
id: page1

property alias message: label.text

Text {
id: label
x: 100
y: 100
color: "white"
}
}

在跳转时这样写：


window.pageStack.push(page1, { message: "Test" }, true)

参数就这样传递过来了。

楼主应该尽快建立起一个学习路线，否则会很被动。

可以从下面这个地址切入：
Functional List of Symbian Components

着重看一下里面的PageStack和Page

另外这几个地址会对你有所帮助：

Dynamic Object Management in QML

Page Based Application Navigation

当然，这些文档在Qt Creator里同样可以看到，只要你养成按F1的习惯。
[解决办法]
还是与时俱进吧，坦率的讲我现有的项目中也并没有使用Qt Quick Components，因为当时在做的时候还没有这个东西。

其实页面跳转的方法有很多，我使用的方法类似:

把你的menuDelegate中的鼠标感应区改成这样：


onClicked: {
    // 创建对象
    var object = Qt.createComponent("Bluetooth.qml").createObject(window)
    object.title = "蓝牙设置页面，点击关闭"
}

添加一个Bluetooth.qml


import QtQuick 1.0

// 蓝牙设置页面
Rectangle {
    id: page
    anchors.fill: parent

    // 属性
    property alias title: titleText.text

    // 构造函数
    Component.onCompleted: {
        console.log("Create Bluetooth Page.")
    }

    // 析构函数
    Component.onDestruction: {
        console.log("Destroy Bluetooth Page.")
    }

    // 标题
    Text {
        id: titleText
    }

    // 鼠标区域
    MouseArea {
        anchors.fill: parent
        onClicked: {
            page.destroy()
        }
    }
}

OK，页面跳转、参数传递，全部搞定！

这方面的资料，看我给你的Dynamic Object Management in QML那个地址是很有用的。

但，真的搞定了吗？显然还不够，你需要自己完成页面的动态过度效果，你还需要考虑返回值的问题……等等等等，所以我现在倾向于使用Page Based Application Navigation，因为只有你两种方式都做过了，你才知道它能帮你解决很多问题。至少它能轻松的帮你把页面导航做的跟平台上的其它应用一致。

当然，使用基于Page的导航是否能满足你的所有需要呢？我看也不见得，总之你还会遇到各种问题。

到底怎么做，你自己决定把，好在，在Qt Quick上完成一个效果可以有N种办法。
[解决办法]
像LS说的那样的动态创建页面需要注意一下该页面的创建时间，如果需要的时间太长，就会造成用户体验效果不好。对于那样的页面只有在程序初始化的时候创建:(
[解决办法]
跑了一下楼主的程序，终于知道楼主的问题在哪里了，楼主对代理的理解还不够。

我把你的VidwModel.qml的代码改了，再加上我原来给出的代码，全了，楼主自己看看你原来的问题到底出在哪里吧。


import QtQuick 1.0

Component {
    id: menuDelegate

    Rectangle {
        x: 2
        width: parent.width - x * 2 
 
        height: 70
        radius: 5
        border.color: "red"

        Text {
            anchors.fill: parent
            text: title
            font.bold: true;
            verticalAlignment: Text.AlignVCenter;
            horizontalAlignment: Text.AlignHCenter;
            font.pointSize: 16
            color: "blue"
        }

        // 鼠标区域
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if (title == "开启蓝牙")
                {
                    // 创建对象
                    var object = Qt.createComponent("TestPage.qml").createObject(window)
                    object.title = "蓝牙设置页面，点击关闭"
                }
            }
        }
    }
}

zhu_xz兄你说的也许是个问题，但我在实际开发中感觉没有太大的时间代价。当然，如果这个qml是在网上而不是在本地就另当别论了。

呵呵，关于导航以前也有人问过这个问题的，一直想好好的把这方面的东西整理一下，又比较懒。今天就拿这个帖子来说一下吧。

其实关于Qt的页面切换在没有出现Page Based Application Navigation之前还是没有一个统一的方案。可能大家还有其它的什么更好的办法，也说说吧。

zhu_xz兄，什么时候我俩再扯上一通啊？
[解决办法]

引用:

跑了一下楼主的程序，终于知道楼主的问题在哪里了，楼主对代理的理解还不够。

我把你的VidwModel.qml的代码改了，再加上我原来给出的代码，全了，楼主自己看看你原来的问题到底出在哪里吧。

C/C++ code

import QtQuick 1.0

Component {
id: menuDelegate

Rectangle {
x: 2
……

更正几处笔误：
yan521geng兄，别忘了在main.qml的ListView里加上spacing: 10，这样会让列表项分开一些。
另外，把var object = Qt.createComponent("TestPage.qml").createObject(window)里的TestPage改成BluetoothPage
[解决办法]

引用:

zhu_xz兄你说的也许是个问题，但我在实际开发中感觉没有太大的时间代价。当然，如果这个qml是在网上而不是在本地就另当别论了。

QtQuick项目界面跳转怎的实现

热点推荐