Qt Design Studio常用组件及其属性

入坑Qt Design Studio

        笔者此前一直使用的是Qt creator与其内置的Qt designer进行客户端界面设计和开发，采用的是qwidget+c++的设计方法，由于项目需要进行3D设计，转而学习使用Qt Design Studio，发现qml代码简单，布局直观，对新手更为友好，开发上手快速。因此，后续也会在本专题中持续分享Qt Design Studio的学习收获，双九硕菜鸟一枚，如有技术上的错误欢迎指正，共同进步！

常用组件及其功能

        入门使用Qt design studio进行客户端的开发工作伊始，在查阅Qt DS的相关资料时，发现只有极少部分人在使用DS进行开发，相关博文与技术资料少之又少，而官方文档阅读起来对新手又极为不友好（内容多且杂）。软件的安装和入门使用网上已有相关博文介绍，因此不在此赘述，笔者本文将主要介绍design模式下常用的组件及其功能。

BASIC(11)

名称	功能	常用属性/信号
Animated Image	显示动画图像，如 GIF 等。它支持循环播放和控制动画帧的展示。	source: 动画图片的路径。 playing: 控制动画是否播放（true 或 false）。 loops: 动画循环播放的次数，-1 表示无限循环。 currentFrame: 当前显示的帧号，可以手动控制动画的进度。 frameCount: 动画的总帧数。
Border Image	用于显示带有边框的图像，可以用来创建九宫格拉伸效果。它支持定义图像的中间区域和四个边缘的区域，从而在缩放图像时保持边框不变形。	source: 图像路径。 border: 定义图像的边框区域（上下左右的边距）。 horizontalTileMode / verticalTileMode: 决定边缘图像的填充方式（平铺、拉伸、重复等）。 tile: 设置图像是否平铺。
Flickable	Flickable 是一个可滚动的区域，用于包含大量内容或超过显示区域的内容。它可以上下或左右拖动，并支持惯性滚动。	contentWidth / contentHeight: 设置滚动区域内容的宽高。 contentX / contentY: 当前滚动内容的位置坐标。 flickableDirection: 设定滚动方向（水平、垂直或双向）。 interactive: 控制是否允许用户交互（如拖动）。 常用信号： onFlickStarted: 滑动开始时触发。 onFlickEnded: 滑动结束时触发。
Focus Scope	FocusScope 是一个特殊的容器，用于处理键盘焦点导航。它可以将焦点限制在一个子树内，并确保焦点在该范围内循环。	focus: 是否有焦点。 focusScope: 设置组件是否为焦点范围。
Image	用于显示静态图像，支持多种图像格式（如 PNG、JPEG、SVG）。	source: 图像的路径或 URL。 fillMode: 设置图像如何填充，例如拉伸、保持比例缩放                    （Image.PreserveAspectFit）。 opacity: 图像的不透明度（0 到 1 之间）。 cache: 是否缓存图像以提高性能。
Item	所有 QML 可视元素的基类，不具备视觉表现，仅作为其他元素的容器。	width, height: 设置元素的宽和高。 x, y: 设置元素的相对位置。 anchors: 用于布局和定位其他元素。
Mouse Area	捕捉鼠标事件的区域，可以处理点击、拖动、悬停等交互。	anchors.fill: 通常与父元素绑定，扩展到填充父元素。 enabled: 是否启用鼠标事件。 hoverEnabled: 是否响应鼠标悬停。 常用信号： onClicked: 当鼠标点击时触发。 onPressed: 当鼠标按下时触发。 onReleased: 当鼠标释放时触发。 onPositionChanged: 当鼠标移动时触发。
Rectangle	显示一个矩形区域，支持设置颜色、边框、圆角等，常用于作为 UI 的基本结构组件。	color: 矩形的填充颜色。 radius: 圆角半径，用于创建圆角矩形。 border.color: 设置边框颜色。 border.width: 设置边框宽度。
Text	显示静态文本，支持多种字体样式、对齐方式等。	text: 显示的文本内容。 font.pixelSize: 设置字体大小。 color: 文本颜色。 horizontalAlignment / verticalAlignment: 文本对齐方式（如居中、左对齐）。
Text Edit	多行可编辑文本区域，支持格式化文本，常用于需要编辑和展示较长文本的场景。	text: 编辑区域内的文本内容。 font.pixelSize: 设置字体大小。 wrapMode: 设置文本换行模式（如                     TextEdit.WordWrap）。 readOnly: 是否只读。 常用信号： onTextChanged: 文本改变时触发。
Text Input	单行可编辑文本输入框，支持用户输入、文本验证等。	text: 当前输入的文本。 placeholderText: 占位符文本，提示用户输入内容。 echoMode: 设置文本回显方式&