Тип QML контейнера

Абстрактный базовый тип, предоставляющий функциональность, общую для контейнеров. Подробнее...

• Список всех членов, включая унаследованные члены
• Устаревшие члены

Свойства

• contentChildren : список<Элемент>
• contentData : список<Объект>
• contentModel : модель
• count : целое число
• currentIndex : целое число
• currentItem : Элемент

Методы

• void addItem(Элемент item)
• void decrementCurrentIndex()
• void incrementCurrentIndex()
• void insertItem(целое число index, Элемент item)
• Элемент itemAt(целое число index)
• void moveItem(целое число from, целое число to)
• void removeItem(Элемент item)
• void setCurrentIndex(целое число index)
• Элемент takeItem(целое число index)

Подробное описание

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

Управление текущим индексом

При использовании нескольких контейнеров, таких как TabBar и SwipeView, вместе, их свойства currentIndex можно привязать друг к другу, чтобы сохранить их синхронизацию. При взаимодействии пользователя с любым контейнером изменения его текущего индекса автоматически распространяются на другой контейнер.

Обратите внимание, однако, что присвоение currentIndex значения в JavaScript удаляет соответствующую привязку. Для сохранения привязок используйте следующие методы для изменения текущего индекса:

• incrementCurrentIndex()
• decrementCurrentIndex()
• setCurrentIndex(int index)

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
}

Реализация контейнеров

Container не предоставляет стандартной визуализации. Он используется для реализации таких контейнеров, как SwipeView и TabBar. При реализации пользовательского контейнера наиболее важной частью API является contentModel, который предоставляет содержащиеся элементы таким образом, что он может быть использован как модель делегата для представлений элементов и повторителей.

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

Обратите внимание, как размеры элементов страницы задаются вручную. Это потому, что в примере используется обычный контейнер, который не делает никаких предположений о визуальном макете. Обычно нет необходимости указывать размеры элементов в конкретных реализациях Container, таких как SwipeView и TabBar.

См. также Контейнерные элементы управления.

Документация свойств

contentChildren : список<Элемент>

Это свойство содержит список дочерних элементов содержимого.

Список содержит все элементы, объявленные в QML как дочерние элементы контейнера, а также элементы, динамически добавленные или вставленные с помощью методов addItem() и insertItem() соответственно.

Примечание: В отличие от contentData, contentChildren не включает невизуальные QML-объекты. Он переупорядочивается при вставке или перемещении элементов.

См. также Item::children и contentData.

[по умолчанию] contentData : список<Объект>

Это свойство содержит список данных содержимого.

Список содержит все объекты, объявленные в QML как дочерние элементы контейнера, а также элементы, динамически добавленные или вставленные с помощью методов addItem() и insertItem() соответственно.

Примечание: В отличие от contentChildren, contentData включает невизуальные QML-объекты. Он не переупорядочивается при вставке или перемещении элементов.

См. также Item::data и contentChildren.

[только для чтения] contentModel : модель

Это свойство содержит модель содержимого элементов.

Модель содержимого предоставляется для целей визуализации. Она может быть назначена как модель элементу содержимого, отображающему содержимое контейнера.

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

См. также contentData и contentChildren.

[только для чтения] count : целое число

Это свойство содержит количество элементов.

currentIndex : целое число

Это свойство содержит индекс текущего элемента.

См. также currentItem и Управление текущим индексом.

[только для чтения] currentItem : Элемент

Это свойство содержит текущий элемент.

См. также currentIndex.

Документация методов

void addItem(Элемент item)

Добавляет элемент.

void decrementCurrentIndex()

Уменьшает текущий индекс контейнера.

Этот метод можно вызвать для изменения текущего индекса без нарушения существующих currentIndex привязок.

Этот метод был добавлен в QtQuick.Controls 2.1 (Qt 5.8).

См. также currentIndex и Управление текущим индексом.

void incrementCurrentIndex()

Увеличивает текущий индекс контейнера.

Этот метод можно вызвать для изменения текущего индекса без нарушения существующих currentIndex привязок.

Этот метод был добавлен в QtQuick.Controls 2.1 (Qt 5.8).

См. также currentIndex и Управление текущим индексом.

void insertItem(целое число index, Элемент item)

Вставляет элемент в индекс.

Элемент itemAt(int индекс)

Возвращает элемент по индексу, или null, если он не существует.

void moveItem(int из, int в)

Перемещает элемент из одного индекса в другой.

void removeItem(Элемент элемент)

Удаляет и уничтожает указанный элемент.

Этот метод был представлен в QtQuick.Controls 2.3 (Qt 5.10).

void setCurrentIndex(int индекс)

Устанавливает текущий индекс контейнера.

Этот метод можно вызвать для установки конкретного текущего индекса, не нарушая существующие currentIndex привязки.

См. также currentIndex и Управление текущим индексом.

Элемент takeItem(int индекс)

Удаляет и возвращает элемент по индексу.

Примечание: Владение элементом передаётся вызывающей стороне.

Этот метод был представлен в QtQuick.Controls 2.3 (Qt 5.10).