内容

• 特性
• 方法
• 详细描述
• Using Containers
• Managing the Current Index
• Implementing Containers

Container QML Type

Abstract base type providing functionality common to containers. 更多...

import 语句：	import QtQuick.Controls 2.2
Since:	Qt 5.7
继承：	Control
继承者：	DialogButtonBox , MenuBar , SplitView , SwipeView ，和 TabBar

• 所有成员列表，包括继承成员

特性

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

方法

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

详细描述

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 特性。

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 .

另请参阅 容器控件 .

特性文档编制

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.

注意： 不像 contentData , contentChildren does not include non-visual QML objects. It is re-ordered when items are inserted or moved.

另请参阅 Item::children and contentData .

[default] contentData : list < 对象 >

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.

注意： 不像 contentChildren , contentData does include non-visual QML objects. It is not re-ordered when items are inserted or moved.

另请参阅 Item::data and contentChildren .

[since QtQuick.Controls 2.5 (Qt 5.12)] contentHeight : real

This property holds the content height. It is used for calculating the total implicit height of the container.

Unless explicitly overridden, the content height is automatically calculated based on the implicit height of the items in the container.

该特性在 QtQuick.Controls 2.5 (Qt 5.12) 引入。

另请参阅 contentWidth .

[read-only] contentModel : model

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

另请参阅 contentData and contentChildren .

[since QtQuick.Controls 2.5 (Qt 5.12)] contentWidth : real

This property holds the content width. It is used for calculating the total implicit width of the container.

Unless explicitly overridden, the content width is automatically calculated based on the implicit width of the items in the container.

该特性在 QtQuick.Controls 2.5 (Qt 5.12) 引入。

另请参阅 contentHeight .

[read-only] count : int

This property holds the number of items.

currentIndex : int

This property holds the index of the current item.

另请参阅 currentItem and Managing the Current Index .

[read-only] currentItem : Item

This property holds the current item.

另请参阅 currentIndex .

方法文档编制

void addItem ( Item item )

添加 item .

[since QtQuick.Controls 2.1 (Qt 5.8)] void decrementCurrentIndex ()

Decrements the current index of the container.

This method can be called to alter the current index without breaking existing currentIndex 绑定。

This method was introduced in QtQuick.Controls 2.1 (Qt 5.8).

另请参阅 currentIndex and Managing the Current Index .

[since QtQuick.Controls 2.1 (Qt 5.8)] void incrementCurrentIndex ()

Increments the current index of the container.

This method can be called to alter the current index without breaking existing currentIndex 绑定。

This method was introduced in QtQuick.Controls 2.1 (Qt 5.8).

另请参阅 currentIndex and Managing the Current Index .

void insertItem ( int index , Item item )

Inserts an item at index .

Item itemAt ( int index )

返回项在 index ，或 null if it does not exist.

void moveItem ( int from , int to )

Moves an item from one index to another.

[since QtQuick.Controls 2.3 (Qt 5.10)] void removeItem ( Item item )

Removes and destroys the specified item .

This method was introduced in QtQuick.Controls 2.3 (Qt 5.10).

void setCurrentIndex ( int index )

设置当前 index of the container.

This method can be called to set a specific current index without breaking existing currentIndex 绑定。

另请参阅 currentIndex and Managing the Current Index .

[since QtQuick.Controls 2.3 (Qt 5.10)] Item takeItem ( int index )

Removes and returns the item at index .

注意： The ownership of the item is transferred to the caller.

This method was introduced in QtQuick.Controls 2.3 (Qt 5.10).