Найти в Дзене

Практика [1]: создать приложение на Qt / Qml - бэкенд С++, которое отображает список имен, ListView | подключение к Qml (setContextProperty)

Задание с собеседования. Это часть нашего курса учебно-тренировочных занятий по С/С++, Linux, Git, Qt | Qml для начинающих разработчиков. Он разработан для "своих" для корпоративного обучения на предприятии. А это - раздаточный материал, которым мне не жалко поделиться с другими ребятами, которые хотят учиться. Полный код возьмите на GitFlic Итак: Задача 1: Создайте простое приложение на QML, которое отображает список имен и позволяет выбрать одно из них. Задача 2: При выборе имени должно отображаться сообщение с приветствием. Задача 3: Напишите функцию на C++, которая принимает строку и возвращает ее длину. Задача 4: Интегрируйте эту функцию в QML, чтобы отображать длину выбранного имени из первого задания. -> Задача 1: ... отображает список имен ... -> Задача 2: ... должно отображаться сообщение.... -> здесь могут быть варианты. И переход в другие окна, и диалоги, и Popup. -> Задача 3: Напишите функцию на C++, которая принимает строку и возвращает ее длину. -> Задача 4:
Оглавление
Задание с собеседования
Задание с собеседования

1. Практическое задание с собеседования

  • Необходимо создать простое приложение на QML, которое отображает список имен и позволяет выбрать одно из них.
  • При выборе имени должно отображаться сообщение с приветствием.
  • Проект должен содержать бэкенд с бизнес логикой: напишите функцию на C++, которая принимает строку и возвращает ее длину.
  • Затем интегрируйте эту функцию в QML, чтобы отображать длину выбранного имени из первого задания.

Задание с собеседования.
Это часть нашего курса учебно-тренировочных занятий по С/С++, Linux, Git, Qt | Qml для начинающих разработчиков.
Он разработан для "своих" для корпоративного обучения на предприятии.
А это - раздаточный материал, которым мне не жалко поделиться с другими ребятами, которые хотят учиться.
Полный код возьмите на GitFlic

2. Декомпозиция. Разбиение задания на простые небольшие задачи

  • Во - первых, нам необходимо показать, что мы понимаем путь решения.
  • Во - вторых, получим список задач, которые отражены в файле tasks.txt (условное название). Каждая задача - это отдельная ветка в Git. И это важно.

Итак:

Задача 1: Создайте простое приложение на QML, которое отображает список имен и позволяет выбрать одно из них.

Задача 2: При выборе имени должно отображаться сообщение с приветствием.

Задача 3: Напишите функцию на C++, которая принимает строку и возвращает ее длину.

Задача 4: Интегрируйте эту функцию в QML, чтобы отображать длину выбранного имени из первого задания.

3. С чего начать

-> Задача 1: ... отображает список имен ...
  • как слышим "список" - то скорее всего будет ListView.
  • ... позволяет выбрать одно из них -> выбираем мы кликая мышкой, следовательно либо это MouseArea, либо Button.

-> Задача 2: ... должно отображаться сообщение.... -> здесь могут быть варианты. И переход в другие окна, и диалоги, и Popup.

-2
  • Но поскольку мы говорим о начинающих специалистах я бы предложил блок Text. Самый простой вариант.
  • Сразу подумаем где мы его разместим. Наверное ниже, под ListView, следовательно не забываем про anchors.

-> Задача 3: Напишите функцию на C++, которая принимает строку и возвращает ее длину.

-3
  • Сразу автоматически создаем класс. В котором будет метод, возвращающий длину строки. QString имеет встроенный метод, тут просто.
  • Мы будем принимать в метод некую строку, значит автоматически это происходит по ссылке. Вот так: (const QString &str ).
  • Этот метод нужно сделать видимым в Qml - используем Q_INVOKABLE.

-> Задача 4: Интегрируйте эту функцию в QML, чтобы отображать длину выбранного имени из первого задания.

-4
  • подключаем через #include наш класс в main.cpp
  • подключаем <QQmlContext>
  • создаем объект нашего класса
  • используем setContextProperty, чтобы наш объект был виден в Qml
  • первый аргумент в кавычках - это так мы будем обращаться к объекту класса из Qml
  • второй аргумент - передаем наш объект

4. Получим следующее

-5

-6

5. Ссылки на материал. Видео. Листинг кода