Практика [2] Qt Qml ListModel. Задача с собеседования. Методы model: get | append | remove | count.
Этот материал - продолжение Практика [1] Qt Qml ListView. Как добавить C++ class в Qml. Задание с собеседования. https://rutube.ru/video/5142a13b24bcc03f392195a0ee5cefb3/ Она же почитать на dzen Практика [1]: создать приложение на Qt / Qml - бэкенд С++, которое отображает список имен, ListView | подключение к Qml (setContextProperty) https://dzen.ru/a/aCdV0Ja-EgBXNPyF Задача 1: Создать схематическое расположение элементов интерфейса - Использовать Column для вертикального расположения элементов - Использовать Row для горизонтального расположения элементов - Добавить несколько Rectangle с разными цветами для визуализации интерфейса: - Rectangle 1: цвет "lightblue" - Rectangle 2: цвет "lightgreen" - Rectangle 3: цвет "lightcoral" - Rectangle 4: цвет "lightyellow" - Убедиться, что элементы имеют заданные размеры и правильно располагаются Задача 2: Реализовать выбор элемента списка - ListView, отображающим список имен из ListModel - Добавить делегат для отображения имени - Добавить MouseArea в делегат для обработки клика по элементу - При клике установить currentIndex в ListView Задача 3: Отобразить выбранное имя в отдельном Text элементе под списком Задача 4: Добавить функциональность добавления новых имен - Добавить кнопку "Add Name" - При нажатии добавлять новый элемент в модель с уникальным именем Задача 5: Добавить функциональность удаления выбранного имени - Добавить кнопку "Remove Selected" - При нажатии удалять элемент из модели, если выбран элемент Код на GitFlic: https://gitflic.ru/project/lashko_ag/practice_2_qml_name_list_listelement_currentindex 00:00 - Введение в задачи по созданию интерфейса 00:11 - Декомпозиция задания 00:22 - Создание проекта Qml в QtCreator по умолчанию 01:13 - git сохранение изменений, создание ветки под задачу 1_schematic_positions 04:12 - Задача 1: Создание схематического расположения элементов интерфейса 04:40 - Использование `Column` для вертикального расположения элементов 05:00 - Добавление нескольких `Rectangle` для визуализации интерфейса 06:34 - Использование `Row` для горизонтального расположения Buttons 08:34 - git сохранение изменений, создание ветки под задачу 2_listview_listmodel 09:50 - Задача 2: Реализация выбора элемента списка 10:05 - Создание `ListView` для отображения списка имен из `ListModel` 10:18 - Использование модели данных `ListModel` - ListElement 11:00 - Добавление делегата `delegate:` для отображения имени 13:00 - Добавление `MouseArea` для обработки клика по элементу. `index` и `currentIndex` 14:40 - Установка `currentIndex` в `ListView`: -1 (не выбрано) 15:20 - git сохранение изменений, создание ветки под задачу 3_selection_text 17:00 - Задача 3: Отображение выбранного имени в `Text` элементе 17:32 - Пример использования метода `get(index)`: получение данных из модели для отображения выбранного имени 19:00 - git сохранение изменений, создание ветки под задачу 4_add_name 20:39 - Задача 4: Добавление функциональности для добавления новых имен 20:50 - Добавление `Button` кнопки "Add Name" 21:15 - Метод `append({element})`: добавление нового элемента в модель 21:30 - Свойство `count`: возвращает количество элементов в модели 22:02 - git сохранение изменений, создание ветки под задачу 5_remove_name 23:10 - Добавление кнопки "Remove Selected". Удаление элемента из модели при нажатии на кнопку 23:30 - Метод `remove(index)`: удаление элемента из модели 24:53 - git сохранение изменений, создание ветки под задачу `fix:` правильное расположение кнопок 25:55 - `anchors.horizontalCenter` 26:12 - git сохранение изменений, создание ветки под задачу `fix:` отображение элемента списка поверх `Text`. 27:35 - `clip: true` всё, что визуально выходит за пределы прямоугольника ListView (его ширины и высоты), не будет отображаться. 28:00 - git сохранение изменений, создание ветки под задачу `fix:` добавление нового элемента в модель с уникальным именем при нажатии 29:40 - Генерация уникальных имен при добавлении новых 31:00 - git сохранение изменений, слияние в ветку `master`, git merge
Этот материал - продолжение Практика [1] Qt Qml ListView. Как добавить C++ class в Qml. Задание с собеседования. https://rutube.ru/video/5142a13b24bcc03f392195a0ee5cefb3/ Она же почитать на dzen Практика [1]: создать приложение на Qt / Qml - бэкенд С++, которое отображает список имен, ListView | подключение к Qml (setContextProperty) https://dzen.ru/a/aCdV0Ja-EgBXNPyF Задача 1: Создать схематическое расположение элементов интерфейса - Использовать Column для вертикального расположения элементов - Использовать Row для горизонтального расположения элементов - Добавить несколько Rectangle с разными цветами для визуализации интерфейса: - Rectangle 1: цвет "lightblue" - Rectangle 2: цвет "lightgreen" - Rectangle 3: цвет "lightcoral" - Rectangle 4: цвет "lightyellow" - Убедиться, что элементы имеют заданные размеры и правильно располагаются Задача 2: Реализовать выбор элемента списка - ListView, отображающим список имен из ListModel - Добавить делегат для отображения имени - Добавить MouseArea в делегат для обработки клика по элементу - При клике установить currentIndex в ListView Задача 3: Отобразить выбранное имя в отдельном Text элементе под списком Задача 4: Добавить функциональность добавления новых имен - Добавить кнопку "Add Name" - При нажатии добавлять новый элемент в модель с уникальным именем Задача 5: Добавить функциональность удаления выбранного имени - Добавить кнопку "Remove Selected" - При нажатии удалять элемент из модели, если выбран элемент Код на GitFlic: https://gitflic.ru/project/lashko_ag/practice_2_qml_name_list_listelement_currentindex 00:00 - Введение в задачи по созданию интерфейса 00:11 - Декомпозиция задания 00:22 - Создание проекта Qml в QtCreator по умолчанию 01:13 - git сохранение изменений, создание ветки под задачу 1_schematic_positions 04:12 - Задача 1: Создание схематического расположения элементов интерфейса 04:40 - Использование `Column` для вертикального расположения элементов 05:00 - Добавление нескольких `Rectangle` для визуализации интерфейса 06:34 - Использование `Row` для горизонтального расположения Buttons 08:34 - git сохранение изменений, создание ветки под задачу 2_listview_listmodel 09:50 - Задача 2: Реализация выбора элемента списка 10:05 - Создание `ListView` для отображения списка имен из `ListModel` 10:18 - Использование модели данных `ListModel` - ListElement 11:00 - Добавление делегата `delegate:` для отображения имени 13:00 - Добавление `MouseArea` для обработки клика по элементу. `index` и `currentIndex` 14:40 - Установка `currentIndex` в `ListView`: -1 (не выбрано) 15:20 - git сохранение изменений, создание ветки под задачу 3_selection_text 17:00 - Задача 3: Отображение выбранного имени в `Text` элементе 17:32 - Пример использования метода `get(index)`: получение данных из модели для отображения выбранного имени 19:00 - git сохранение изменений, создание ветки под задачу 4_add_name 20:39 - Задача 4: Добавление функциональности для добавления новых имен 20:50 - Добавление `Button` кнопки "Add Name" 21:15 - Метод `append({element})`: добавление нового элемента в модель 21:30 - Свойство `count`: возвращает количество элементов в модели 22:02 - git сохранение изменений, создание ветки под задачу 5_remove_name 23:10 - Добавление кнопки "Remove Selected". Удаление элемента из модели при нажатии на кнопку 23:30 - Метод `remove(index)`: удаление элемента из модели 24:53 - git сохранение изменений, создание ветки под задачу `fix:` правильное расположение кнопок 25:55 - `anchors.horizontalCenter` 26:12 - git сохранение изменений, создание ветки под задачу `fix:` отображение элемента списка поверх `Text`. 27:35 - `clip: true` всё, что визуально выходит за пределы прямоугольника ListView (его ширины и высоты), не будет отображаться. 28:00 - git сохранение изменений, создание ветки под задачу `fix:` добавление нового элемента в модель с уникальным именем при нажатии 29:40 - Генерация уникальных имен при добавлении новых 31:00 - git сохранение изменений, слияние в ветку `master`, git merge