4. 是时候了解一下QML的基本语法了

1. QML语法

qml是一种用于开发用户界面的高级语言，通常用于开发Qt Quick应用程序。qml语言的语法类似于html、javascript等脚本语言，因此易于学习和使用。

2. QML语法基础

下面是一个简单的 qml 代码示例，它展示了如何创建一个自定义的 qml Item，自定义属性、信号、信号处理程序，以及导入模块：

import QtQuick 2.0 //导入模块

// 导入一个名为 "utils.js" 的 js 文件
import "utils.js" as Utils

// 定义一个名为 "CustomItem" 的新类型
Item {
    // 定义一个名为 "color" 的自定义属性，类型为 "color"
    property color color: "black"

    // 定义一个名为 "itemClicked" 的自定义信号
    signal itemClicked

    // 定义一个名为 "onItemClicked" 的信号处理程序 当itemClicked信号发出时，这个处理程序将被调用
    onItemClicked: {
        // 在这里执行一些操作，例如更改颜色属性
        color = "red"
        // 使用导入的 js 文件中的函数
        Utils.doSomething()
    }

    // 定义一个名为 "mouseArea" 的 MouseArea 子元素
    MouseArea {
        anchors.fill: parent
        onClicked: {
            // 当鼠标单击该 Item 时，触发 "itemClicked" 信号
            itemClicked()
        }
    }
}

3. QML中基类介绍

QtObject 是 QML 中的一个基础类，它是所有 QML 类的基类。可以定义的属性、信号、方法等。
Item继承了QtObject类。它表示一个可视的图形元素，可以用于在屏幕上显示形状、图像等内容。所有的可视元素都从Item继承。
Item 类还定义了一些自己的属性，例如：
width 和 height：表示 Item 的宽度和高度。
x 和 y：表示 Item 的 x 坐标和 y 坐标。
visible：表示 Item 是否可见。

4. 如何封装自定义QML类并在代码中使用？

我们演示实现一个自己的扁平风格按钮类，类名就叫FlatButton，效果如下：

首先创建一个空工程，里面包含一个可显示窗口的main.qml文件
在main.qml同级目录添加一个qml文件，FlatButton.qml。在qml中文件名就是QML的类名
实现FlatButton.qml，并在main.qml使用

FlatButton.qml

import QtQuick
//继承自MouseArea ，自带各种鼠标事件，单击双击等等
MouseArea {
    property alias color: bg.color //利用alias我们可以对子组件的属性别名，成为FlatButton的属性
    property alias radius: bg.radius
    property alias text: text.text
    Rectangle{
        id: bg                     //组件id在当前源码中唯一，不能重复
        anchors.fill: parent
        Text{
            id: text
            anchors.centerIn: parent
        }
    }
}

main.qml

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    
    //使用自定义类
    FlatButton{
        width: 100
        height: 40
        anchors.centerIn: parent //按钮居中在parent中

        color: "#66d9ff" //自定义的属性
        radius: 6        //自定义的属性
        text: "打开"      //自定义的属性
        onClicked: {     //处理clicked信号
            console.log("打开按钮被点击...") //输出控制台日志
        }
    }
}