ComboBox

Элемент 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]. И затем можно обратиться к отдельным свойствам объекта.