QML学习笔记1

# QT_QML_stu1

## qml语言简介

类似html语言的作用，用于Qt程序的界面设计，可以和css、js、C++交互

qml语言形式上 类似json

## 基本知识：

### 一个标准的qml界面语句

``` 

import QtQuick 2.9

import QtQuick.Window 2.2

Window {

    visible: true

    width: 640

    height: 480

    title: qsTr("Hello World")

    MouseArea{

        anchors.fill: parent

        onClicked: {

            Qt.quit()

        }

    }

    Text{

        id:text1

        text: qsTr("hello qml")

        anchors.centerIn: parent

    }

}

```

### 结构：

    基本结构：

        - import区域 : 一般写在前面几行 ：引用类型有：

            - 包含类型的全面空间

            - 包含QML代码文件目录

            - js代码文件

        - declaration区域

### 语法

- 引用语句

```import  name  version```

- 一般语句 - 由大括号嵌套,形成层级关系

- 注释语句  

    - 单行 //

    - 多行 /*...*/

- 模块申明

#### 知识点

- qml元素均继承自item

    - 一般的属性：

        - id

        - 

- anchors 锚  可以用来进行关系定位

    - anchors.left/right/top/bottom : parents.left (关系定位)

    - anchors.leftMargin...（关系定位间距）

- Positioners 定位器：用于元素组合

    - Column 列

    - Row   行

    - Grid  网格

    - Flow  流