入坑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: