Реклама

Поиск

QML - Урок 007. ListView Qml. Динамическое создание и удаление элементов

TutorialQMLAndroid, ListItem, ListModel, ListView, QML, Qt236

В статье про динамическое создание виджетов в Qt я уже рассказывал, как создавать и удалять кнопки динамически, а также как с ними взаимодействовать. И там использовался Vertical Layout , а случае с Qml мы сможем использовать ListView Qml, как аналогично используется при программирование в Java под Android. Что, к слову говоря, также применимо при программировании на Qt под Android.

В статье про динамическое создание виджетов использовались для примера объекты класса QButton. В данной статье будут использоваться объекты Button Qml, о кастомизации которых было рассказано в следующей статье . Но кнопки будут размещаться в ListView Qml.

Структура проекта для работы с ListView Qml

На это раз обойдёмся проектом, созданным по умолчанию и даже без дизайнера интерфейсов. Тем более, что на момент написания статьи не все параметры можно было задать в дизайнере. А структура проекта следующая:

  • QmlDynamic.pro - профайл проекта;
  • deployment.pri - файл правил деплоя на целевую платформу;
  • main.cpp - основной файл запуска приложения;
  • main.qml - qml файл с исходными кодами программы

QML - Урок 019. Navigation Drawer в Qt Qml Android

TutorialQMLNavigation Drawer, Qt, QtQuick, QML, Qndroid162

Одним из основных элементов управления в Android приложении является Navigation Drawer , но в QML нет готового компонента для этого элемента, зато парни из Cutehacks сделали свой Navigation Drawer , код этого компонента выложен на гитхабе. Я давно уже хотел запустить этот код на живом Android устройстве и вот руки наконец-то до него дотянулись.

Я подробно изучил этот код и немного его подправил, поскольку в той версии было некоторое несоответствие Material Design в том плане, что панелька раскрывалась на 78 процентов от ширины экрана вне зависимости от ориентации. А Material Design рекомендует в портретной ориентации раскрывать Navigation Drawer так, чтобы он не доходил до противоположного края на 56 dip в случае со смартфонами и на 64 dip в случае с планшетами, но сделаем хотя бы для смартфонов, а в ландшафтной ориентации был не более, чем 320 dip шириной. Что я и поправил, также выпилив малую часть часть ненужного на данный момент кода и немного переименовав переменные под себя.

Что касается величины dip , то есть пикселей независимых от плотности экрана устройства, то это уже вопрос правильного масштабирования элементов интерфейса .

Предлагаю Вашему вниманию пример использования данного Navigation Drawer для смены трёх фрагментов в объект Loader с помощью трёх пунктов меню, которые будут находиться в данном Navigation Drawer .

Структура проекта для работы с Navigation Drawer

Структура проект будет сходна со структурой проекта из статьи по изучению работы с компонентом Loader .

  • QmlNavigationDrawer.pro - профайл проекта;
  • main.cpp - основной файл исходных кодов приложения;
  • main.qml - основной файл кодов qml;
  • Fragment1.qml - первый фрагмент для замены в Loader;
  • Fragment2.qml - второй фрагмент;
  • Fragment3.qml - третий фрагмент.
  • NavigationDrawer.qml - сам объект Navigation Drawer.

Реклама

QML - Урок 022. Анимация клика по элементу списка в стиле Material Design

TutorialQMLанимация, material design, Android, Qt, QML111

QML не предоставляет анимацию взаимодействий кликов в стиле Material Design для Android по умолчанию, но это легко настраивается с помощью примитивов Rectangle. Анимация заключается в том, чтобы в одном родительском объекте Rectangle, при клике, необходимо второй дочерний объект Rectangle растянуть на всю область родительского. При этом дочерний объект будет растягиваться в течении определённого времени и выглядеть будет как расширяющийся круг, но при этом он не будет выходить за пределы родительского объекта.

Для наглядности создадим список элементов, по которым будем производить клики. Для отслеживания кликов будет использоваться область MouseArea, в которой будет отслеживаться несколько сигналов взаимодействия:

  • onClicked - в данном сигнале будет останавливаться анимация и выполняться результат взаимодействия со списком;
  • onPressed - при сигнале нажатия необходимо запустить анимацию, с предварительной установкой координат анимируемого объекта Rectangle.
  • onReleased - при отпускании элемента списка необходимо остановить анимацию;
  • onPositionChanged - при смене позиции области также необходимо остановить анимацию.

Для выполнения анимации используется объект PropertyAnimation. В данном объекте выбирается цель анимации, и список свойств, которые будут подвергаться изменению. В случае с анимируемым объектом Rectangl, необходимо расширять его как круг, для этого увеличиваем его свойства width, height и radius с одной и той же величиной. А для того, чтобы полностью заполнить родительский объект, выставим конечную величину свойств в три раза большую, чем ширина родительского элемента.

Также важным свойством родительского элемента является:

clip - активируя данное свойство ( true ), Мы обрезаем дочерние элементы объекта, чтобы они не выходили за границы родительского элемента.

QML - Урок 012. Передача данных из TextInput в ListView (Модель/Представление)

TutorialQMLListView, ListModel, TextInput, Model, Delegate, QML, Qt, Android, View152

Работа с ListView в QML является довольно частым аспектом при разработке приложения под Android, поскольку очень многие приложения имеют в своём функционале построение списков с данными, записями, параметрами и т.д. Также это справедливо и при разработке приложений под Desktop на QML принцип будет аналогичен под обе платформы.

Для рассмотрения передачи информации в список предлагаю внимательно рассмотреть следующий вариант взаимодействия с ListView.

Принцип представления данных в ListView

Объект ListView имеет два важных свойства:

  1. delegate - который определяет внешний вид одного элемента в ListView
  2. model - в которую помещаются данные каждого элемента

В качестве модели представления данных можно использовать объект ListModel в котором содержатся данные для каждого элемента в списке. При этом данные присваиваются переменным, которые были присвоены определённым свойствам объектов в delegate. В ниже приведенном рисунке delegate имеет два объекта Text, свойствам text которых присвоены переменные text_first и text_second. Данные переменные определяют, куда буду подставляться данные из каждого ListElement в ListModel. Как видно из рисунка, каждый ListElement имеет два свойства, название которых идентично переменным, которые присвоены в delegate. По сути данные переменные являются ролями, по которым подставляются значения из ListModel. Таким образом получаем ListView с текстовыми полями, которые заполнены теми данными, которые были внесены в каждый ListElement в ListModel.

Реклама

Реклама