QML控件类型：Container

一、描述

Container 是类容器用户界面控件的基本类型，允许动态插入和删除项目。是 DialogButtonBox、MenuBar、SplitView、SwipeView、TabBar 的基类。

1.1、使用容器

通常，项目被静态声明为 Container 的子项，但也可以动态添加、插入、移动和删除项目。可以使用 itemAt() 或 contentChildren 访问容器中的项目。

大多数容器都有“当前项”的概念。当前项是通过 currentIndex 属性指定的，并且可以使用只读的 currentItem 属性进行访问。

以下示例将项目动态插入到 TabBar：

Row {
    TabBar {
        id: tabBar

        currentIndex: 0
        width: parent.width - addButton.width

        TabButton { text: "TabButton" }
    }

    Component {
        id: tabButton
        TabButton { text: "TabButton" }
    }

    Button {
        id: addButton
        text: "+"
        flat: true
        onClicked: {
            tabBar.addItem(tabButton.createObject(tabBar))
            console.log("added:", tabBar.itemAt(tabBar.count - 1))
        }
    }
}

1.2、管理当前索引

当同时使用多个容器时，例如 TabBar 和 SwipeView，它们的 currentIndex 属性可以相互绑定以保持同步。 当用户与任一容器交互时，其当前索引更改会自动传播到另一个容器。

但是在 JavaScript 中分配 currentIndex 值会删除相应的绑定。为了保留绑定，应使用以下方法更改当前索引：

• 增量当前索引：incrementCurrentIndex()
• 递减当前索引：decrementCurrentIndex()
• 设置当前索引：setCurrentIndex()

TabBar {
    id: tabBar
    currentIndex: swipeView.currentIndex
}

SwipeView {
    id: swipeView
    currentIndex: tabBar.currentIndex
}

Button {
    text: qsTr("Home")
    onClicked: swipeView.setCurrentIndex(0)
    enabled: swipeView.currentIndex != 0
}

Button {
    text: qsTr("Previous")
    onClicked: swipeView.decrementCurrentIndex()
    enabled: swipeView.currentIndex > 0
}

Button {
    text: qsTr("Next")
    onClicked: swipeView.incrementCurrentIndex()
    enabled: swipeView.currentIndex < swipeView.count - 1
}

二、属性成员

1、contentChildren : list<Item>

内容子项的列表。该列表包含在 QML 中声明为容器子项的所有项目，以及分别使用 addItem() 和 insertItem() 方法动态添加或插入的项目。

与 contentData 不同，contentChildren 不包含非可视 QML 对象。插入或移动项目时会重新排序。

2、[default] contentData : list<Object>

内容数据列表。该列表包含在 QML 中声明为容器子项的所有对象，以及分别使用 addItem() 和 insertItem() 方法动态添加或插入的项目。

与 contentChildren 不同，contentData 确实包含非可视 QML 对象。 插入或移动项目时不会重新排序。

3、contentHeight : real / contentWidth : real

内容尺寸。用于计算容器的总隐含尺寸。

除非显式覆盖，否则内容尺寸会根据容器中项目的隐式尺寸自动计算。

4、[read-only] contentModel : model

项目的内容模型。内容模型用于可视化项目。

Container {
    id: container
    contentItem: ListView {
        model: container.contentModel
    }
}

5、[read-only] count : int

项目的数量。

6、currentIndex : int

当前项目的索引。

7、[read-only] currentItem : Item

当前项目。

三、成员函数

1、void addItem(Item item)

添加一个项目。 

2、void decrementCurrentIndex()

      void incrementCurrentIndex()

      void setCurrentIndex(int index)

递减 / 递增 / 设置容器的当前索引。

可以调用这些方法来更改当前索引，而不会破坏现有的 currentIndex 绑定。

3、void insertItem(int index, Item item)

在 index 处插入一个项目。

4、Item itemAt(int index)

返回 index 处的项目，如果不存在则返回 null。

5、void moveItem(int from, int to)

将 from 处的项目移动到 to。

6、void removeItem(Item item)

移除并销毁指定的项目。

7、Item takeItem(int index)

删除并返回索引处的项目。项目的所有权转移给调用者。