# qtinn

**Repository Path**: elffamily/qtinn

## Basic Information

- **Project Name**: qtinn
- **Description**: qt quick
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-09
- **Last Updated**: 2024-06-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 第二部分 Qt Quick

## 第6章 Qt Quick

在Qt Quick的世界里，用户界面以及它们的行为使用QML来描述。QML是对JavaScript的一种扩展，可以让开发者和设计者利用一个声明性语法来使用QML元素指定每一个用户界面。

### 6.1 初识 QML

QML(Qt Meta-Object Language, Qt元对象语言)是一个用来描述应用程序的用户界面的声明式语言。

#### [https://developer.mozilla.org/en/JavaScript/Guide](https://developer.mozilla.org/en/JavaScript/Guide)
6.1.1 QML基本语法

QML的代码一般是这样的：

```c++
import QtQuick 1.0
Rectangle {
  width: 200
  height: 200
  color: "blue"
  
  Image {
    source: "pics/logo.png"
    anchors.centerIn: parent
  }
}
```
1. **对象和属性**
对象由它们的类型指定，并且以大写字母开头，后面跟随一对大括号。在括号中可以添加一些附加数据，比如它的属性值和任意的子对象。

属性通过"属性：值"语法来指定。属性和它的值使用一个冒号隔开。属性可以分行写，例如：

```c++
Rectangle {
  width: 100
  height: 100
}
```
也可以将多个属性写在一行，例如：
```c++
Rectangle { width:100; height: 100}
```
当多个"属性：值"被指定在一行时，它们之间必须使用一个分号隔开。
2. 注释
>单行注释使用"//"开始，在行的末尾结束；
>多行注释使用"/*"开始，使用"*/"结尾
例如：

```c++
Text {
  text: "Hello world!" // 要显示的文本
  /*
  设定文本的字体，
  可以通过设置font属性来完成
  */
  font.family: "Helvetica"
  font.pointSize: 24
  // opacity: 0.5
}
```
3. 对象标识符
每一个对象都可以指定一个唯一的id值，这样便可以在其他对象中识别并引用该对象。例如：

```c++
Row {
  Text {
    id: text1
    text: "Hello World"
  }
  Text { text: text1.text }
}
```
id值在一个单一的组件中必须是唯一的。
注意：id值必须使用小写字母或者下划线开头，而且不能使用字母、数字和下划线以外的字符。

4. 表达式
JavaScript表达式可以用于分配属性的值，例如：

```c++
Item {
  width: 100 * 3
  hegiht: 50 + 22
}
```
在这些表达式中可以包含其他的对象和属性的引用，这样便创建了一个绑定：当表达式的值改变时，该表达式被分配给的属性的值会自动更新为新的值。例如：
```c++
Item {
  width: 300
  height: 300
  
  Rectange {
    width: parent.width - 50
    height: 100
    color: "yellow"
  }
}
```
6.1.2 编写QML的Hello World程序
将helloworld.qml文件中的代码更改为：

```c++
import QtQuick 1.0

Rectange {
  id: myRectangle
  width: 200; height: 200
  color: "lightgray"
  Text { text: "Hello world"}
}
```