三、QML开发之qml 语言基础

QML就是用来编辑和生成Quick界面的语言，所以在开发界面之前一定要了解基础的QML语言基础知识，接下来从介绍qml语法如何编写，变量和属性 对象的简要说明，通过本节的学习能够达到简单的加载图片 和设置lable标签存放位置，简单的buton点击事件的处理等；

3.1 对象 表达式 属性

• QML 文件就是后缀是.qml结尾的文件，下面用一个小例子来介绍具体的内容书写；

功能很简单就是把一张照片放到一个定义的界面中央

import QtQuick 2.12  //代码库的引用方式和python的方式很像 quick理解为事件处理类吧
import QtQuick.Window 2.12   //理解为控件样式类吧
import QtQuick.VirtualKeyboard 2.4

Window {  //定义主窗口对象
    id: window    //窗口的id 一个对象唯一的 在表达式中可以直接引用id来进行处理事件调用
    visible: true   //是否隐藏
    width: 640    //界面的大小设置
    height: 480
    title: qsTr("load photo")  //head 展示字体

    Rectangle { //定义窗口对象
        width: 640    //界面的大小设置
        height: 480
        Image{  //定义图片对象
            source:"qrc:river.jpg"  //加载图片资源
            anchors.centerIn:parent //位置定位在 parent 也就是Rectangle 的屏幕中央
        }

    }


}

解释：

Rectangle { //定义窗口对象 也就是控件的名称 例如table window mouse Image 等等

id ：window //这几个都是对象的属性 id，后续关联信号的时候会用得到 长 宽

width: 640 //界面的大小设置

height: 480

Image{ //定义图片对象 一个对象里面可以放其他的对象 简单的说就像一个面板

source:"qrc:river.jpg" //加载图片资源

anchors.centerIn:parent //位置定位在 parent 也就是Rectangle 的屏幕中央

}

}

属性的类型：int 、real、 double、 bool、string、color、list、font、等

• 如何在工程里面加载图片资源，首先需要创建一个resource文件

• 点击工程名-〉add new -〉 Qt -〉Qt Resource File-〉 取名字-》完成

• 点击 刚才新建 的photo.qrc文件 右击-》添加文件 -》选择本地的图片

• 编译运行如下图：

3.2信号处理器

• 信号处理器起始等同于Qt的信号槽，用来处理定义信号发射和接受的函数；

Rectangle{
    width :320
    height:480
    Button{
        id: quick;  
        text:"退出"
        anchors.left:parent.left; //anchors 可以理解为布局管理器 用来设置控件显示的位置 后续会专门讲
        anchors.lefMargin 4
        anchors.bottonMargin 4
        anchors.bottom:parent.bottom
        onClicked:{        //这个就是定义了Button 点击事件的处理函数 当点击后进入函数体中执行Qt.quit()g关闭窗口看书  Qt是全局类 用来处理 按键 布局属性设置  系统调用接口等
            Qt.quit()
        }
}
}

3.3列表属性

• 所谓的列表属性就是多个控件的包含关系

Item{

children:[

Image{},

Text{},

Button{}

]

}

• Item 对象有一个children对象，children对象里面包含了三个对象，访问对象可以用 []形式给list对象赋值

length 属性提供list内的元素个数,下面代码就是访问子节点的方式；

    Item{
        children:[
            Text{ id:1},
            Text{id:2}
        ]
    }
    Component.onCompleted:{  //当控件加载完成之后就会触发改事件
        for（var i=0；i〈children.length；i++）{  //遍历成员
        console.log（“the name is ”，i，"："，children[i].text）  //打印输出每个成员的文本名字
        }
    }

3.3总结：

本节讲述了如何使用文本编辑一个对象，在对象里面设置一些属性，以及如何编写控件点击事件的函数绑定和调用。

下一节就开始对每一个对象例如Window Rectangle Button等具体的样式修改和属性介绍，敬请期待下一个 谢谢大家的阅读。