Qt qml编程多窗口

前言：

        大约是在大一暑假的时候开始进行QT qml编程。一直用C++挺好，但是大家都说迁移Android的话还是QML做UI很好，所以尝试了一个滑动多窗口的qml的例子，感觉还是很好看。本来想用这个东西做一个基于andorid和win10的串口调试器，或者直接用android作为计算机和单片机通讯。但是时间问题所以只做了ui部分。另外之前，我也开发了一个多功能的通讯调试助手，可以wifi,蓝牙，串口三种调试的方式，可以说是万能的单片机调试助手，目的在给小组添加一点工具，好帮助开发。

   以下是窗口动作的展示：

                                              

由于没有逻辑部分所以，这个过程的实现，完全是由qml编程实现的，没有用到C++和QTQuick ui。

github代码查看点击这里

一般来讲，qml更多的是用于UI实现和渲染什么的，而主要逻辑则还是由C++完成，所以qml和C++可以混合编程。

QML是一种声明性语言，是Qt框架和Quick模块的一部分，它可以构建流畅和高性能的用户界面。

                             

 

Rimac automobili电动超级车信息娱乐系统使用Qt / QML编写。

我这里就不具体介绍了，点击这里，这篇博客介绍的比较细致。

import QtQuick 2.2
import QtQuick.Controls 2.1

ApplicationWindow {

    visible: true
    width: 640
    height: 600
    title: qsTr("万能调试小助手")
    property int i :0

    StackView {
        id: stack
        initialItem: mainView
        anchors.fill: parent
    }
    Page {
        id: mainView
        Image {
            id: image_main
            anchors.fill: parent
            source: "qrc:/qtquickplugin/images/template_image.png"
        }
        Text {
            id: text1
            x: 9
            y: 549
            width: 251
            height: 33
            text: qsTr("万能调试助手，版本1.0")
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 18
            font.bold: false
            font.pixelSize: 18
        }
        Button {

            id: button
            x: 235
            y: 360
            width: 170
            text: qsTr("遥控器")
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter

            onClicked: {

                page_Contral.visible =true;
                page_Contral.stack = stack;
                stack.push(page_Contral)
            }
        }
        Button {
            x: 519
            y: 429
            height: 51
            width: 121
            text: qsTr("设置")
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            onClicked: {
                page_set.visible = true;
                page_set.stack = stack;
                stack.push(page_set)
            }
        }
        Column {
            id: column
            anchors.fill: parent
        }
        Button {
            id: button1
            x: 235
            y: 217
            width: 170
            text: qsTr("通讯调试")
            anchors.horizontalCenterOffset: 0
            anchors.horizontalCenter: parent.horizontalCenter
            topPadding: 2
            onClicked: {

                page_messgae.visible =true;
                page_messgae.stack = stack;
                stack.push(page_messgae)

            }
        }
    }
    Message{
        id:page_messgae
        visible: false
    }
    Set{
        id:page_set
        visible: false
    }

    Contral{
        id:page_Contral
        visible: false
    }
    Serial{
        id:page_serial
        visible: false
    }
}

以上是最主要的文件，就是申明了几个Page，通过几个button来进行页面的切换，在代码中你可以看到其他的文件的代码。

有了这个例子，那么以后再做一个项目的时候UI实现就可以相当顺利，而且也和美观，拜托了以往那种桌面的‘呆板UI’。