使用 UI 组件

操作指南：使用 UI 组件

一个组件定义在一个文件中（文件扩展名为ui.qml 或.qml ）。例如，Button 组件可能定义在Button.ui.qml 中。通常，组件的视觉外观在UI 文件（ui.qml ）中定义。要创建组件文件，您可以使用向导模板，或将组件实例移至单独的组件文件中。

“Component ”视图列出了可用的组件。

Components 显示从您导入到项目中的 Qt 模块中的 Qml 类型。这些模块包含视觉组件（如基本形状和 UI 控件），并为项目添加功能。

您可以对 UI 控件进行样式设置，使其具有特定操作系统（如 macOS、Windows、Android 或 iOS）的外观和风格。

某些模块没有可见组件。例如，“Qt.Multimedia ”模块为您的 UI 添加了对音频和视频文件的支持。

有关创建自定义组件的更多信息，请参阅“创建自定义组件”。

组件 ID

每个组件及其每个实例都有一个ID，该 ID可唯一标识该组件，并允许其他组件的属性与其绑定。ID 必须是唯一的，必须以小写字母或下划线字符开头，且只能包含字母、数字和下划线字符。

有关更多信息，请参阅《id 属性》。

经济地使用组件

组件的使用会带来性能开销。要高效且经济地使用组件：

• 通过将资源打包成可重用的组件来实现设计组件化，这些组件可以方便地重新组合以满足您的 UI 需求。
• 尽可能少地使用组件。为减少组件数量，请利用别名属性（alias properties） 和状态（states）来区分组件实例。我们建议复用组件而非重复创建，这样组件就不必作为全新的组件类型进行处理。这既能缩短加载和编译时间，又能减小二进制文件的大小。
• 任何数据驱动的内容都应作为相关组件的公共属性（别名属性）导出。例如，速度表应具有int 或real 属性来表示速度，以便 UI 与之绑定。
• 将 UI 与应用程序逻辑分离。设计师应处理UI 文件（.ui.qml ），而开发人员应处理相应的实现文件（.qml ），以定义其程序化行为或 JavaScript 代码。这使得设计和开发双方都能在流程中进行迭代，同时避免了相互覆盖对方工作的风险。