【qml】QML | 创建自定义组件（02）

开篇

在《QML | 创建可重用的组件》一文中，描述了创建自定义组件的第一种方法。本文将来描述第二种方法：

使用Component创建自定义组件

该种方法在实际使用中，可有两种方式：

• （1）在qml文件内创建自定义的组件

• （2）以qml文件的方式创建组件。

在qml文件内创建自定义的组件

组件通常由组件文件定义，也就是.qml文件。Component类型允许在一个QML文档内定义QML组件，而不用作为一个单独的QML文件，例如如下代码：

该组件的封装代码是放置于main.qml这个应用根描述文件中的，我们运行一下：

将得到一个空白的窗体。

如果我们要使用这个组件，我们可以使用Loader类型，该QML类型用于：动态加载QML组件。

这时候会动态加载这个组件，运行则可以看见一个蓝色的矩形：

也可以使用Loader创建多个矩形：

运行效果如下：

综上可见，虽然矩形本身会自动渲染和显示，但在Component中定义的则不会这样。因为Component将QML类型封装在内部，就好像它们是在一个单独的QML文件中定义的，直到请求时(在本例中，使用Loader类型)才加载。理解了这一点，如果代码这些写：

结果则是：无法运行程序。因为这种写法在本质上是没有QML根元素的。因此需注意：

在Component类型封装的QML组件中不能存在多个同级的QML类型，只能存在一个根元素。

使用Component在qml文件内创建组件不能直接实例化，可以结合：Loader、Repeater、View视图、脚本来使用。下文将描述使用Component创建多个qml组件。

使用Component创建多个qml组件

使用Component创建多个qml组件在实际的QML应用开发中是一种较为常用的方法，因为一个应用软件，会包含多个软件UI，例如下图所示效果：

在上图所示的窗体中会有四个按钮，分别为：page_1、page_2、page_3、page_4。当我们在点击其中的按钮后，会跳转到对应的页面，然而在页面中又有其他的QML类型和逻辑。这时候则需要使用Component来封装不同页面的组件。以上图效果为例，则需要创建四个不同的页面描述qml文件，这里文件名称如下：

然后使用Component创建四个页面qml组件，例如下例代码：