Container QML Type

Abstract base type providing functionality common to containers. More...

• List of all members, including inherited members

Properties

• contentChildren : list<Item>
• contentData : list<Object>
• contentHeight : real
• contentModel : model
• contentWidth : real
• count : int
• currentIndex : int
• currentItem : Item

Methods

• void addItem(Item item)
• void decrementCurrentIndex()
• void incrementCurrentIndex()
• void insertItem(int index, Item item)
• Item itemAt(int index)
• void moveItem(int from, int to)
• void removeItem(Item item)
• void setCurrentIndex(int index)
• Item takeItem(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))
         }
     }
 }

Managing the Current Index

When using multiple containers, such as TabBar and SwipeView, together, their currentIndex properties can be bound to each other to keep them in sync. When the user interacts with either container, its current index changes automatically propagate to the other container.

Notice, however, that assigning a currentIndex value in JavaScript removes the respective binding. In order to retain the bindings, use the following methods to alter the current index:

• 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
 }

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

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

Method Documentation