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

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

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

Свойства

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

Методы

• void addItem(Элемент item)
• void decrementCurrentIndex()
• void incrementCurrentIndex()
• void insertItem(int index, Элемент item)
• Элемент itemAt(int index)
• void moveItem(int from, int to)
• void removeItem(Элемент item)
• void setCurrentIndex(int index)
• Элемент takeItem(int 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()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

contentHeight : вещественное число

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

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

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

См. также contentWidth.

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

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

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

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

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

contentWidth : вещественное число

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

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

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

См. также contentHeight.

[только для чтения] 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(int index, Item item)

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

Item itemAt(int index)

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

void moveItem(int from, int to)

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

void removeItem(Item item)

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

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

void setCurrentIndex(int index)

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

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

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

Item takeItem(int index)

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

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

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