Qml 学习之路（1）--简单的helloworld按钮

毕业工作也快一年了，老实说自己还是有一些懈怠，博客也好久没有更新了。工作这段时间在公司也做了许多事情，包括linux下，VxWorks下还有Qt，公司的产品原始大多是VxWorks下的，有幸去维护其中某个系列的产品，对VxWorks这个实时操作系统也有一些了解，然后公司某些产品要转成linux系统，图形界面用Qt，我也算其中一员吧，维护兼研发工作，期间也做了一些东西，像linux下串口编程，dsp编程，还有文件目录及文件格式处理（压缩等），还有热敏打印机的操作等等，维护里做了个适配新的wifi模块功能以及一些界面的改动，Qt也做了一些界面的绘制和处理相关的工作。关于前面做的一些工作，希望我有时间整理后会记录分享一下，也算对自己的一个复习，最近兼学Qml，可能公司后面一些产品界面维护会交到我手上，因此Qml的学习也算是对自己的一个提升，在此记录下自己的学历历程，也同时分享给大家。

我自己的Qml的学习呢首先还是通过看书来的，没错就是《QmlBook-In-Chinese》，这本书可以在开源的网上下到，关于这本书的评价，我看来的话挺好的。

大家都知道学习C语言的时候第一件事就是编出一个打印helloworld的程序（老师都是这么教的--谭浩强），那么学Qml首先也要编个自己的能跑的Qml的程序，我装的Qt 版本是5.9.7。

首先新建一个项目工程：选择如图：

然后填好名字，选好目录和构建（选MinGw）一路到finish。

首页会是这样的一个情况：

作为开始我们先直接在main.qml里写程序吧，import声明导入一个指定的模块版本（这个暂时不管好了）

然后写我们自己的程序：

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle{
        id: rect_quit
        width: 100
        height: 100
        anchors.centerIn: parent
        Text {
            anchors.centerIn: parent
            text: qsTr("helloworld")
            color: "#303030"
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                Qt.quit()
            }
        }
        focus: true
        radius: 50
        gradient: Gradient{
            GradientStop{position: 0.0;color: "blue"}
            GradientStop{position: 0.5;color: "red"}
            GradientStop{position: 1.0;color: "slategray"}
        }
        border.color: "slategray"
        border.width: 5
    }
}

先简单介绍下用到的元素，属性以及操作，关于语法这里就不说了，后面的学习会有专门针对元素和操作的分享，其中属性后面的：（冒号表示初始绑定操作），可被=（赋值）覆盖，这个后面会有详解

Window最外层窗口元素可以先不介绍，id是一个元素的标识（可无），可以用来被引用（不是所有情况），具有唯一性，绑定后不能设置为其他值。

visible: 可视性属性，与Qt种setVisible()类似，width： 宽，height：高，title是Window的标题。

Rectangle{}是矩形元素，每个元素后跟{}与函数类似，矩形元素需要有宽和高才可视，anchors（锚定）是布局操作，centerIn：parent表示处于父元素的中心。

Text{}是文本元素，然后居中，text属性是文本，color属性是颜色。

MouseArea{}元素是鼠标区域元素，锚定填充整个父元素也就是矩形元素，onClicked：可以先理解为Qt中的pressevent()。

focus：焦点，radius：半径，用来做曲边的，从矩形元素的四个角开始，这里填的50，而矩形元素的宽高是100，所以最后出来会是一个圆。

gradient: Gradient{}梯度属性机梯度元素，这个拿来做颜色渐变的（我现阶段知道的），position：位置属性从0-1表父元素的顶部到底部，我这里在顶、中、底三处设置了，color是颜色属性。

border是边界（框）属性，color表颜色，width表宽度。

最后的效果是这样的：

点击圆球会退出。

要说简单也不简单了，对没学过Qml的来说，当然大佬略过，第一篇先开始做个小效果出来，后面再来慢慢具体学习，好了先到这儿。