QML：Instantiator 动态创建对象的元素

0. 简介

在QML中，Instantiator是一个可以动态创建对象的元素。它可以用来控制对象的动态创建，或者从模板动态创建多个对象。Instantiator会管理它创建的对象，这些对象会成为Instantiator的子对象，并且如果Instantiator的属性发生变化，会影响其子对象的创建、更新和销毁。

0.1 其他创建QML组件的实例的组件

• ListView：ListView是用于显示列表数据的控件，它可以根据模型数据动态地创建列表项，并且支持滚动和重用机制，适用于需要显示大量数据的列表场景。
• GridView：GridView与ListView类似，但是可以将列表项按照网格布局排列，适用于需要显示多行多列数据的场景。
• PathView：PathView允许用户在一个路径上滚动视图内容，它可以根据模型数据动态地创建视图项，并沿着指定的路径排列，适用于需要展示具有连续性的数据的场景。
• Loader：Loader控件用于动态地加载和销毁指定的QML组件，可以根据需要在运行时加载不同的组件，适用于需要根据条件动态切换界面的场景。
• SwipeView：SwipeView允许用户在多个页面之间进行滑动切换，它可以根据模型数据动态地创建页面，并支持预加载和重用机制，适用于需要实现页面切换效果的场景。

1. 作用

Instantiator是一个用于动态创建QML组件实例的控件。它可以根据提供的模型数据，在运行时创建多个相同类型的组件实例，从而实现动态的界面元素生成。

1.1 Instantiator的一些主要属性包括：

• model：用于指定模型数据，即要根据哪些数据动态创建组件实例。这可以是一个列表、数组或者其他数据源。
  • 作用：指定了Instantiator要使用的数据源，根据这些数据动态创建组件实例。
  • 使用场景：适用于需要根据动态数据生成界面的场景，比如根据用户的输入、网络请求的结果等动态生成UI元素。
  • 注意事项：确保模型数据的格式和内容符合Instantiator的预期，以确保正确地生成组件实例。
• delegate：用于指定一个QML组件，作为每个创建的实例的模板。每个实例都会基于这个模板创建。
  • 作用：定义了每个创建的组件实例的外观和行为。
  • 使用场景：适用于需要定制每个实例外观和行为的场景，比如列表项、表格单元格等。
  • 注意事项：确保delegate组件中的属性绑定正确，并且不要在delegate中绑定过于复杂的操作，以免影响性能。
• count：Instantiator当前管理的对象数量。
  • 作用：查看当前Instantiator创建了多少个对象。
  • 使用场景：count属性常用于跟踪Instantiator创建的对象数量。
  • 注意事项：这个属性是只读的，不能被直接设置。
• active属性用于控制Instantiator控件的激活状态。
  • 当active为true时，Instantiator会根据模型数据动态创建组件实例；当active为false时，Instantiator会暂停创建实例。默认值为true。
  • 使用场景：适用于需要动态控制Instantiator创建实例的场景，比如在特定条件下暂停或者恢复创建实例。
  • 注意事项：确保在需要暂停或者恢复创建实例时，正确设置active属性的值。另外，注意active属性与enabled属性的区别，enabled用于控制Instantiator是否可以响应用户输入，而active用于控制实例的创建。
• asynchronous属性：用于指定Instantiator是否异步创建实例。
  • 作用：当asynchronous为true时，Instantiator会异步地创建实例，不会阻塞主线程；当asynchronous为false时，Instantiator会同步地创建实例，可能会阻塞主线程。
  • 使用场景：适用于需要在创建实例过程中不阻塞主线程的场景，比如当模型数据量较大或者实例化过程比较耗时时，可以将asynchronous设置为true，以确保界面的流畅性。
  • 注意事项：在设置asynchronous属性时，需要考虑实例化过程的性能影响，如果实例化过程不会明显影响界面的响应性能，可以将asynchronous设置为false以简化代码逻辑。

以下是一个简单的例子：

Instantiator {
   
    model: 3
    delegate: Rectangle {
    width: 50; height: 50 }
}

在上述代码中，Instantiator将创建三个矩形对象。

1.2 Instantiator的方法和信号

在QML中，Instantiator有一个方法和两个信号:

• 方法 objectAt(int index)
  • 返回Instantiator管理的指定索引处的对象。如果索引无效（例如，如果索引大于或等于count属性的值），则此方法返回undefined。
  • 使用场景：可以用于访问Instantiator创建的特定对象。例如，可以使用此方法来获取和修改Instantiator创建的对象的属性。
• 信号 objectAdded(int index, QtObject object)
  • 当新对象被添加到Instantiator时，会发出此信号。index参数是新对象的索引，object参数是新对象本身。
• 信号 objectRemoved(int index, QtObject object)
  • 当对象从Instantiator中移除时，会发出此信号。index参数是被移除对象的索引，object参数是被移除的对象。

举个例子：

import QtQuick 2.0

Item {
   
    width: 200
    height: 200

    Instantiator {
   
        id: instantiator
        model: ListModel {
   
            ListElement {
    name: "Item 1" }
            ListElement {
    name: "Item 2" }
            ListElement {
    name: "Item 3" }
        }
        delegate: Rectangle {
   
            width: 100
            height: 50
            color: index % 2 === 0 ? "lightblue" : "lightgreen"
            border.color: "black"
            Text {
   
                anchors.centerIn: parent
                text: model.name
            }
        }

        onObjectAdded: {
   
            console.log("Object added at index", index);
            console.log("Object:", object);
            console.log("Object name:", object.name);
        }

        onObjectRemoved: {
   
            console.log("Object removed from index", index);
            console.log("Object:", object);
            console.log("Object name:", object.name);
        }
    }

    MouseArea {
   
        anchors.fill: parent
        onClicked: {
   
            var index = Math.floor(Math.random() * instantiator.count); // 随机选择一个实例
            var obj = instantiator.objectAt(index); // 获取指定索引处的对象
            console.log("Object at index", index);
            console.log("Object:", obj);
            console.log("Object name:", obj.name);
        }
    }
}

• 在这个示例中，Instantiator创建了三个矩形，每个矩形都显示了一个文本。当一个对象被添加或移除时，相应的信息会打印到控制台中。点击窗口中的任意位置，会随机选择一个已实例化的对象，并打印其相关信息。
• 在这个示例中，objectAt() 方法用于获取指定索引处的对象，而objectAdded() 和 objectRemoved() 信号分别在对象被添加和移除时触发，提供了对象的索引和对象本身的信息。

3. 注意事项

• Instantiator会管理它创建的所有对象。这意味着，当Instantiator的model或delegate属性改变时，可能会导致Instantiator销毁一些对象。因此，你应该避免直接删除Instantiator创建的对象，而应该通过改变Instantiator的属性来让Instantiator自己去删除对象。
• Instantiator创建的对象的父对象是Instantiator本身。这意味着，当Instantiator被销毁时，它创建的所有对象也会被销毁。