【Qt6 QML Book 基础】03：核心元素（附完整可运行工程代码）

原创

已于 2025-04-23 22:31:56 修改 · 785 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#qt6 #qml6

于 2025-04-22 08:51:20 首次发布

前言

在 Qt6 QML 开发中，Rectangle、Text、Image 等核心视觉元素是构建高性能界面的基础。继前两篇《可交互旋转风车动画》《QML 语法基础》之后，本文结合官方教程，通过完整可运行工程示例与逐行中文注释，系统解析视觉元素的样式控制、布局逻辑与交互实现，帮助开发者夯实 QML 界面开发基础。

一、运行效果图

本文示例代码运行后，界面包含矩形样式演示、文本效果展示、图像缩放裁剪及交互功能区，各元素按坐标精准定位，视觉层次分明。实际效果如下：

二、核心视觉元素概览

Qt6 QML 的视觉元素均继承自 Item 基类，共享几何定位、样式渲染、交互响应等通用能力。本章重点解析以下核心元素：

矩形（Rectangle）：基础图形绘制，支持纯色填充、边框、圆角及线性渐变
文本（Text）：复杂文本显示，支持字体样式、中间省略、下沉效果与对齐控制
图像（Image）：图片加载与显示控制，支持原始尺寸、等比缩放裁剪
鼠标区域（MouseArea）：非视觉交互组件，实现点击事件响应与元素状态切换

三、核心元素代码解析（含中文注释）

3.1 窗口与基础设置

import QtQuick          

Window {  
    id: mainWindow            // 主窗口唯一标识符  
    width: 640; height: 480   // 窗口尺寸（宽×高，像素）  
    visible: true             // 窗口默认可见  
    title: qsTr("核心视觉元素演示")  // 窗口标题（支持多语言翻译）

3.2 矩形元素：从基础形状到复杂样式

3.2.1 纯色填充矩形

    Rectangle {  
        id: rectSolid             // 纯色矩形标识  
        x: 12; y: 12              // 元素左上角坐标（x,y）  
        width: 76; height: 96     // 宽度与高度  
        color: "lightsteelblue"   //