Container QML Type
A container control base type. More...
| Import Statement: | import QtQuick.Controls 2.0 |
| Since: | Qt 5.7 |
| Inherits: | |
| Inherited By: |
Properties
- contentChildren : list
- contentData : list
- contentModel : model
- count : int
- currentIndex : int
- currentItem : Item
Methods
- void addItem(Item item)
- void insertItem(int index, Item item)
- Item itemAt(int index)
- void moveItem(int from, int to)
- void removeItem(int index)
Detailed Description
Container is the base type of container-like user interface controls that allow dynamic insertion and removal of items.
Using Containers
Typically, items are statically declared as children of Container, but it is also possible to add, insert, move and remove items dynamically. The items in a container can be accessed using itemAt() or contentChildren.
Most containers have the concept of a "current" item. The current item is specified via the currentIndex property, and can be accessed using the read-only currentItem property.
The following example illustrates dynamic insertion of items to a TabBar, which is one of the concrete implementations of Container.
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))
}
}
}
Implementing Containers
Container does not provide any default visualization. It is used to implement such containers as SwipeView and TabBar. When implementing a custom container, the most important part of the API is contentModel, which provides the contained items in a way that it can be used as a delegate model for item views and repeaters.
Container {
id: container
contentItem: ListView {
model: container.contentModel
snapMode: ListView.SnapOneItem
orientation: ListView.Horizontal
}
Text {
text: "Page 1"
width: container.width
height: container.height
}
Text {
text: "Page 2"
width: container.width
height: container.height
}
}
Notice how the sizes of the page items are set by hand. This is because the example uses a plain Container, which does not make any assumptions on the visual layout. It is typically not necessary to specify sizes for items in concrete Container implementations, such as SwipeView and TabBar.
See also Container Controls.
Property Documentation
contentChildren : list<Item> |
This property holds the list of content children.
The list contains all items that have been declared in QML as children of the container, and also items that have been dynamically added or inserted using the addItem() and insertItem() methods, respectively.
Note: Unlike contentData, contentChildren does not include non-visual QML objects. It is re-ordered when items are inserted or moved.
See also Item::children and contentData.
This property holds the list of content data.
The list contains all objects that have been declared in QML as children of the container, and also items that have been dynamically added or inserted using the addItem() and insertItem() methods, respectively.
Note: Unlike contentChildren, contentData does include non-visual QML objects. It is not re-ordered when items are inserted or moved.
See also Item::data and contentChildren.
This property holds the content model of items.
The content model is provided for visualization purposes. It can be assigned as a model to a content item that presents the contents of the container.
Container {
id: container
contentItem: ListView {
model: container.contentModel
}
}
See also contentData and contentChildren.
This property holds the index of the current item.
See also currentItem.
[read-only] currentItem : Item |
This property holds the current item.
See also currentIndex.
Method Documentation
void addItem(Item item) |
Adds an item.
void insertItem(int index, Item item) |
Inserts an item at index.
Item itemAt(int index) |
Returns the item at index, or null if it does not exist.
Removes an item at index.
Note: The ownership of the item is transferred to the caller.