01第一个Qml程序例子引出的相关知识点

最普通的vip用户

已于 2022-11-26 10:09:42 修改

阅读量303

点赞数

分类专栏：一步一步跟着学Qml 文章标签： qt 开发语言

于 2022-11-26 10:07:25 首次发布

本文链接：https://blog.csdn.net/weixin_39466327/article/details/128048180

版权

一步一步跟着学Qml 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

QML是Qt推出的Qt Quick技术的一部分，是它新增的简便易学的语言。

QML是一种描述性语言，用来描述一个程序的用户界面：是什么样子，以及它如何表现。

在QML中，一个用户界面被指定为具有属性的对象树。这使得Qt更加便于很少或没有编程经验的人使用。
QML是Qt4.7.0中新增的Qt Quick核心组件：它是一个标识语言，由QtQuick封装在Item {}的元素的标识组成。它从头设计了用户界面的创建，可以让开发人员快速、简单的理解。用户界面可以使用JavaScript代码来提供和加强更多的功能。 Qt Quick可以使用本地已有的Qt C++轻松快速的扩展它的能力。简单声明的UI被称作前端，本地部分被称作后端。这样可将程序的计算密集部分与来自应用程序用户界面操作部分分开。
在项目中前端开发使用QML/JaveScript，后端代码开发使用Qt C++来完成系统接口和计算工作，能自然地将设计界面的开发者和功能开发者分开。
创建一个简单的HelloWorld，在QtCreator中可以一步一步实现，可参考网上相关步骤，代码如下：

import QtQuick 2.12

Rectangle {
    id: myRectangle;

    width: 360; height: 360;
    color: "lightgray";

    Text {
        text: "Hello World"; color: "darkgreen";
        x: 100; y:100;
        anchors.centerIn: parent;
    }
}

import QtQuick 2.12

Rectangle {
    id: myRectangle;

    width: 360; height: 360;
    color: "lightgray";

    Text {
        text: "<h2>Hello World</h2>"; color: "darkgreen";
        x: 100; y:100;
        anchors.centerIn: parent;
    }
}

这里需要重点提要的知识点是Item对象和anchors：

Item

Item 类型是 Qt Quick 中所有可视项的基本类型；
Qt Quick 中的所有可视项都继承自 Item，注意 Item 对象没有视觉外观，但它定义了所有视觉项的通用属性。
Item 类型可做为根元素包含视觉项目。

anchors

Item的anchors属性包含以下情况：

// 4个边：
anchors.top : AnchorLine
anchors.bottom : AnchorLine
anchors.left : AnchorLine
anchors.right : AnchorLine

// 2个居中
anchors.horizontalCenter : AnchorLine
anchors.verticalCenter : AnchorLine

// 基线
anchors.baseline : AnchorLine

// 填充与居中
anchors.fill : Item
anchors.centerIn : Item

// 1+4个边界
anchors.margins : real
anchors.topMargin : real
anchors.bottomMargin : real
anchors.leftMargin : real
anchors.rightMargin : real

// 2个居中的偏移值+基线的偏移值
anchors.horizontalCenterOffset : real
anchors.verticalCenterOffset : real
anchors.baselineOffset : real

// 居中时对齐属性          强制居中,默认为true, 假如宽或者高为奇数时,如果中心对齐, 就可以保证绝对对齐。
anchors.alignWhenCentered : bool