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

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

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

Свойства

• contentChildren : список<Элемент>
• contentData : список<Объект>
• contentHeight : вещественное
• contentModel : модель
• contentWidth : вещественное
• 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, который является одним из конкретных реализаций 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))
        }
    }
}

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

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

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

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

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

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, который не делает никаких предположений о визуальном расположении. Обычно нет необходимости указывать размеры элементов в конкретных реализациях Container, таких как SwipeView и TabBar.

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

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

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

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

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

См. также Элемент::children и contentData.

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

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

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

См. также Элемент::data и contentChildren.

[с QtQuick.Controls 2.5 (Qt 5.12)] contentHeight : вещественное

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

Если явно не переопределено, высота содержимого автоматически вычисляется на основе неявной высоты элементов в контейнере.

Это свойство было добавлено в QtQuick.Controls 2.5 (Qt 5.12).

См. также contentWidth.

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

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

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

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

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

[с QtQuick.Controls 2.5 (Qt 5.12)] contentWidth : вещественное

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

Если явно не переопределено, ширина содержимого автоматически вычисляется на основе неявной ширины элементов в контейнере.

Это свойство было добавлено в QtQuick.Controls 2.5 (Qt 5.12).

См. также contentHeight.

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

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

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

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

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

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

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

См. также currentIndex.

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

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

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

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

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

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

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

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

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

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

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

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

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

void insertItem(int index, Item item)

Вставляет item в позицию index.

Item itemAt(int index)

Возвращает элемент в позиции index, или null если его нет.

void moveItem(int from, int to)

Перемещает элемент from в позицию to.

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

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

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

void setCurrentIndex(int index)

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

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

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

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

Удаляет и возвращает элемент в позиции index.

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