Ubuntu SDK 第一节 -- 创建一个简单的QML应用

安装完开发环境后。

运行ubuntu sdk，点击File->New File or Project->Ubuntu->Simple UI，工程名为：FirstQMLApp，如下图所示：

好吧，我也是第一次用这个，先运行看看效果，点Debug->Start Debugging->Start Debugging 或者点击左下角的，效果如下图：

说实话有点丑，毕竟一行代码都没有改，下面打开工程文件中的FirstQMLApp.qml，如下：

import QtQuick 2.0
import Ubuntu.Components 0.1
import "components"

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "com.ubuntu.developer..FirstQMLApp"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    width: units.gu(100)
    height: units.gu(75)

    Page {
        title: i18n.tr("Simple")

        Column {
            spacing: units.gu(1)
            anchors {
                margins: units.gu(2)
                fill: parent
            }

            HelloComponent {
                id: label
                objectName: "label"

                text: i18n.tr("Hello..")
            }

            Button {
                objectName: "button"
                width: parent.width

                text: i18n.tr("Tap me!")

                onClicked: {
                    label.text = i18n.tr("..world!")
                }
            }
        }
    }
}

会JavaScript的朋友会发现（不会也没关系，本人也不会），怎么这么熟悉！其实官方说啦，其深度集成JavaScript。

现在让我们来看看这块代码

import QtQuick 2.0
import Ubuntu.Components 0.1
import "components"

一般学过语言的朋友应该会明白这个是什么意思：引入一些QML头和一些下面会用到的组件，与C语言中的include一样。

每个QML文件主要有两部分组成：引入段和对象声明段（一般程序开发都是这样）。

引入段，其实就是我们导入我们需要的QML头和组件（引入段还可以指明命名空间和版本），上面的例子中，引入了内置的QML和Ubuntu类型的组件。

对象声明段，在QML中，一个用户界面被制定为属性的对象树（JavaScript可被嵌入）。而MainView作为应用程序的根容器，里面可以包含工具栏、标题等。QML属性声明采用的语法为“property：value”，属性可包括宽度、高度、颜色等。在例子中，我们还用到units.gu 和 i18n.tr，units.gu方法根据应用程序运行的环境返回一个像素值，对于大部分笔记本1gu=8px,而智能手机则是1gu=18px，具体内容请去看官方的解释，我们只要理解，它仅仅是一个跨平台的像素转换工具;而i18n.tr 则是一个国际化和本地化语言支持方法（后面会详细讲解）。上面的例子中，首先定义了一个宽100u 高75u的主视图，然后里面包含一个标题为Simple的页面，该页面有一列，里面包含一个label和一个button，当点击button时lable的内容发生改变（属性以后介绍，现在仅仅是大体上了解下）。