创建自定义组件

您可以使用项目向导模板来创建自定义组件和控件，或者将组件实例移至单独的文件中，将其转换为可创建实例的新组件。随后，您可以在其他组件中使用这些新组件的实例。

自定义组件存储在Components >My Components 中。您可以通过将自定义组件从Components 拖动到2D 或Navigator 视图中，来创建这些组件的实例。

从头开始创建组件

若要使用向导模板创建自定义组件：

1. 选择“File ” > “New File ” > Qt Quick Files > Qt Quick UI File >Choose ，以创建新的.ui.qml 文件。

   注意： 只有当文件名以大写字母开头时，组件 才会显示在“Components ” > “My Components ”中。

2. 选择“Design ”可在“2D ”视图中打开该文件。
3. 将组件从“Components ”拖动到“Navigator ”或“2D ”视图中。
4. 在“Properties ”视图中编辑组件属性。可用的属性取决于组件类型。您可以在“Connections ”视图的“Properties ”选项卡中为组件添加属性。
5. 若要以“Qt Quick Designer”默认不支持的方式更改组件实例的外观和行为，您可以在“Connections ”视图的“Properties ”选项卡中定义自定义属性。

以下各节详细介绍了如何使用“2D ”视图编辑 2D 内容，并提供了使用基本组件实例创建 UI 控件的示例：

• 2D视图
• 创建按钮
• 创建可缩放的按钮和边框

命名约定

建立命名约定，以保持 UI 中组件的有序管理。请准确命名组件并为其分配合适的 ID。特别需要注意的是，请检查并修改从设计工具导出的组件默认名称，以创建符合您所建立的命名约定、既可靠又自解释的名称。

例如，一个按钮符号可能具有 IDmyButton_symbol，而不同的图层可以将其作为前缀，并附加状态名称，从而生成诸如myButton_symbol_default 之类的 ID。为了为项目后期可能添加的鼠标热区做好准备，您可以为它们使用类似的 ID，例如myButton_symbol_hotspot。 当您在屏幕中将该按钮用作实例时，应为每个实例分配一个与该屏幕相关的唯一 ID。例如：myButton_myMenu_home、myButton_myMenu_profile 和myButton_myMenu_settings

将组件实例转换为自定义组件

创建可重用组件的另一种方法是将组件实例移动到单独的组件文件中（.ui.qml ），从而将其转换为自定义组件。在“Navigator ”或“2D ”视图中右键单击一个组件实例，并在上下文菜单中选择“Create Component ”。

为新组件命名，并选择属性是设置给新组件还是原始组件。

当您选择“OK ”时，系统会创建一个新的组件文件，并将该组件的一个实例添加到当前组件文件中的代码中。2D 视图中的UI外观不会发生变化。

若要打开新组件文件以编辑该组件所有实例的属性，请右键单击该组件，然后在上下文菜单中选择“Go into Component ”。有关打开基础组件的其他方法，请参阅“在组件内移动”。

自定义组件列在“Components >My Components ”中，您可以使用它们的实例来构建更多组件。

使用模板合并文件

您可以将当前组件文件与另一个现有的组件文件进行合并，使用方法类似于使用 CSS 样式表。

要将当前文件与模板合并，请在“Navigator ”或“2D ”视图中右键单击一个组件，然后在上下文菜单中选择“Merge with Template ”。

在“Template ”字段中，选择要用作模板的文件。