QML学习日记 Day1：基础语法与属性绑定

## 今天学了什么

今天学习QML概念及基础语法的使用。

## QML

1. 定义

QML：Qt Meta Language，Qt的声明式描述语言，用来写界面。

2. 作用

快速绘制UI，适合动画、流畅的触屏界面，和C++代码交互。

3. QML 和 QWidget 的区别

QWidget：命令式，C++写，重绘机制偏传统，适合工控、桌面工具，开发快，动画弱。

QML：声明式，描述界面长什么样，基于渲染引擎，动画流畅，适合移动端、炫酷界面。

线程：QWidget UI只能主线程；QML有独立渲染线程。

性能：简单界面Widget省心；大量动画、滑动列表QML更好。

4. 基本元素

Rectangle：矩形，常用作背景、色块，可以设置颜色、圆角。

Text：文字，设置内容、字体、颜色。

Image：图片。

MouseArea：鼠标捕获，处理点击。

Item：看不见的容器，用来分组控件。

5. ID 的作用

给控件起唯一标识。

同一个文件内，别的控件可以通过id找到它，读取/修改它的属性。

仅当前qml文件内有效，外部访问不了。

6. 属性绑定

格式：属性: 表达式

绑定：一个属性的值自动跟着别的属性变化，不用手动写更新代码。

特点：单向绑定；被依赖的值一变，当前属性自动刷新。

例：width: rect1.width，宽度跟着rect1宽度自动变。

7. 锚点布局 anchors

用来控制控件相对父控件、其他控件的位置。

常用：centerIn、horizontalCenter、verticalCenter、top、bottom、left、right；

规则：anchors 和 x/y 不要一起写，会冲突。

z属性：控制图层，数值越大越在上层；子控件默认在父控件上方。

## 练习

要求：
  · 写一个简单的 QML 界面，包含一个Text 和几个Rectangle ；
  · 故意修改一个父元素的值，观察子元素是否跟着变化（体会属性绑定）；

import QtQuick

Rectangle {
    width: 640
    height: 480

    color: "red"
    Text {
        id: text
        text: qsTr("你好")
        font.pixelSize: 30
        color:"pink"
        //x:50;y:100
        anchors.centerIn: parent
        z:1
    }

    BlueRectangle{
        width: parent.width/3
        height: parent.height/3
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter

        text2.color: "orange"
        text2.text: "测试2"
    }
    BlueRectangle{
        x:10;y:10
        anchors{
            horizontalCenter: parent.horizontalCenter
            verticalCenter: parent.verticalCenter
        }
       // z:text.z-1
        color: "yellow"
    }

}

复盘：

① 改变父元素的宽度和高度，蓝色方块的宽高也随之改变；

② 想让文字在黄色方块上方显示，不仅可以在文字元素里面写 z:1，还可以在黄色方块元素里面设置 z:text.z-1；

③ qsTr() 的作用：所有界面上的字符串用 qsTr() 包裹，配合 lupdate （小写的L）生成翻译文件可以支持多语言；

④ parent 的作用：parent 就是视觉上的父元素（比如包含 Text 的那个 Rectangle），而 anchors 依赖的就是 parent 或指定 id 的其他控件。

转载自 CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/2201_75293893/article/details/170778091