Элемент ComboBox из пакета "QtQuick.Controls" представляет выпадающий список.
Для установки списка применяется свойство model, которое принимает набор данных в виде массива JavaScript или модели данных, например, объекта ListModel. Также можно передать этому свойству число, которое определяет число элементов списка. Определим простейший выпадающий список:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" ComboBox { model: ["C++", "Java", "JavaScript"] } }
В данном случае модель данных заданы в виде массива JavaScript, в котором три элемента. После запуска приложения мы сможем выбрать один из этих элементов:
Другой вариант - данные в виде модели данных, в качестве которой обычно выступает объект ListModel:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" ComboBox { model: ListModel { ListElement { text: "C++" } ListElement { text: "C#" } ListElement { text: "JavaScript" } } } }
ListModel выступает в качестве контейнера элементов ListItem, каждый из которых собственно и задает элемент списка. ListItem определяется, как и другие элементы в QML, только вместо свойств содержит роли (согласно терминологии официальной документации). По умолчанию, ListItem должен содержать одну роль. Так, в примере выше для каждого ListElement определяется одна роль - "text". Имена ролей должны начинаться со строчной буквы и быть общими для всех элементов в данной модели. Значения должны быть простыми константами: строки, логические значения (true, false), числа. Таким образом, в примере выше определяются три элемента, каждый из которых представляет язык программирования, а свойство "text" указывает на название языка.
Если данные списка представляют сложные значения, то следует указать пару свойств:
textRole: роль, которая отображается в списке
valueRole: роль, которая применяется в качестве значения
Например:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" ComboBox { textRole: "name" // отображаемое свойство valueRole: "id" // свойство значения model: ListModel { ListElement { userId: 1 name: "Tom" age: 39 } ListElement { userId: 2 name: "Bob" age: 43 } ListElement { userId: 3 name: "Sam" age: 28 } } } }
Здесь данные списка заданы объектами с тремя свойствами: name (имя пользователя), age (возраст пользователя) и userId (идентификатор пользователя). Для каждого элемента в списке будет отображаться роль "name", то есть имя пользователя. А в качестве значения элемента будет применяться роль userId, так как идентификаторы уникальны для каждого пользователя:
То же самое касается ситуации, когда данные задаются через массив JavaScript:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" ComboBox { textRole: "name" // отображаемое свойство valueRole: "userId" // свойство значения model: [{ userId: 1, name: "Tomas", age: 39 }, { userId: 2, name: "Bob", age: 43 },{ userId: 3, name: "Sam", age: 28 }] } }
Для отслеживания текущего элемента ComboBox предоставляет ряд свойств:
currentIndex: индекс текущего элемента. Свойство доступно как для чтения, так и для записи, благодаря чему можно установить начальный выбранный элемент
currentText: текст, который представляет выбранный элемент (задается через textRole). Доступно только для чтения
currentValue: значение выбранного элемента (задается через valueRole). Доступно только для чтения
При выборе элемента генерируется сигнал-событие activated, которое можно обработать с помощью обработчика onActivated
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ ComboBox { id: list model: ["C++", "Java", "JavaScript"] // получаем выбранный элемент onActivated:{ output.text = list.model[list.currentIndex] } } Text { id: output font.pixelSize: 15 } } }
В данном случае в обработчике onActivated
с помощью выражения list.model[list.currentIndex]
получаем выбранный объект из массива list.model
по индексу list.currentIndex
и присваиваем этои объект тексту элемента Text.
Аналогичным образом можно получить выбранный элемент, который представляет сложные данные:
import QtQuick import QtQuick.Controls Window { width: 250 height: 200 visible: true title: "METANIT.COM" Column{ ComboBox { id: list textRole: "name" // отображаемое свойство valueRole: "userId" // свойство значения model: [{ userId: 1, name: "Tom", age: 39 }, { userId: 2, name: "Bob", age: 43 }, { userId: 3, name: "Sam", age: 28 }] onActivated: { output.text = list.model[list.currentIndex].name } } Text { id: output font.pixelSize: 15 } } }
Здесь каждый элемент в ComboBox представляет сложный объект с тремя свойствами, но мы также можем получить этот объект с помощью выражения list.model[list.currentIndex]
.
И затем можно обратиться к отдельным свойствам объекта.