Nov. 9, 2015, 4:03 a.m.


ListView, ListModel, TextInput, Model, Delegate, QML, Qt, Android, View

Working with the ListView in QML is a fairly common aspect in the development of Android applications, since many applications have in their functional building lists of data, records, settings, etc. It is also true in developing a Desktop applications with QML principle would be the same for both platforms.

For its consideration of the transfer of information in the list offer carefully consider the following scenario of interaction with the ListView .

The principle of view data in the ListView

ListView object has two important properties:

  1. delegate - which determines the appearance of a single element ListView
  2. model - which placed the data of each element

The transmission model can be used ListModel object that contains the data for each item in the list. The data assigned to variables that have been assigned to certain properties of the objects in the delegate. In the figure below has two delegate objects Text, text properties which the variables text_first and text_second assigned. These variables determine which will be substituted data from each ListElement in ListModel . As can be seen from the figure, each ListElement has two properties, the name of which is identical to the variables that are assigned to the delegate. In fact, these variables are roles, which put a value of ListModel . So we get ListView with text fields, which are filled with the data that have been made in each ListElement in ListModel .

Nov. 6, 2015, 8:17 a.m.


GridLayout, Qt, QML, ячейка, cell, row, column

A short note, born out of the question of one of the regular readers of the site. When developing the application interface under QML for positioning objects in the GridLayout is necessary to use the functionality of embedded properties Layout. Such as:

  • Layout.row - indicates the line where the object is located;
  • Layout.column - indicates the column in which the object is located;
  • Layout.rowSpan - indicates how many lines should be stretched object;
  • Layout.columnSpan - indicates how many columns should be stretched object;
  • Layout.minimumWidth - the minimum width of an object in a layer;
  • Layout.minimumHeight - the minimum height of the object in a layer;
  • Layout.preferredWidth - the preferred width of the object in a layer;
  • Layout.preferredHeight - the preferred height of the object in a layer;
  • Layout.maximumWidth - the maximum width of the object in a layer;
  • Layout.maximumHeight - the maximum height of an object in a layer;
  • Layout.fillWidth - filling in width;
  • Layout.fillHeight - filling height;
  • Layout.alignment - alignment layer;
Nov. 5, 2015, 3:26 a.m.


QML, SQL, Qt, DataBase, QSqlQueryModel, TableView

To represent database tables in the development TableView using QML You can use a class inherited from QSqlQueryModel . To do this, in the inherited class to define a method that would establish the respective roles of the table columns to the corresponding columns in the TableView, defined in the QML , which also indicates the roles of each object TableViewColumn , that is, for each column. You will also need to override a method QVariant data(...) const , which returns the data for the table cells. In this case, the information will be returned in accordance with certain roles columns of the table.

The project structure to work with TableView

The project consists of the following files:

  • - the profile of the project;
  • database.h - header to create and initialize the test database;
  • database.cpp - file source code to create and initialize the test database;
  • model.h - header data model file;
  • model.cpp - file source data model;
  • main.cpp - the main source file;
  • main.qml - qml file TableView.
Nov. 2, 2015, 2:55 a.m.


Qt, QML, reference error, TabView

The structure of objects in Qml is a tree in which to access the properties of objects underlying level please refer to the original object, then select the child object and select the child object property to which you want to access.

But in the case TabView this approach does not work, because the objects tabs added dynamically, so you need to access the tab on its index, pick up an object from the item and find it of interest to us a child object in this item also on the index. And then get access to the property of interest to us. It is also recommended to note that in this case, the code does not work completion QtCreator .

And most likely you will get an error as follows:

ReferenceError: 'something' is not defined

Nov. 1, 2015, 12:39 p.m.


QSystemTrayIcon, Qt, QML

When moving the application interface from Qt / C ++ to Qt / QML my hands reached and application icons in the system tray. The aim was to put an icon in the System Tray from C ++ to QML, partially or completely. The first option, which I realized, was a wrapper around QSystemTrayIcon with QMenu using a system of signals and slots . The solution is quite logical, given that in QML is not a facility, like MenuBar to System Tray. So we do a wrapper, which can interact in QML layer.

After the wrapper was implemented, I had the opportunity to consult with the programmer of Wargamming  - Constantine Lyashkevich , who recommended me to pay attention to what QML can have access not only to the signals and slots, and the parameters of the Q_PROPERTY , who also were in the class QSystemTrayIcon , that is, in fact it was only possible to register this class as the type layer in QML and try to write almost all the code on the QML. I checked the board and talked about by Constantine. As a result, he became interested in this problem and we spent the evening entertaining hour of attempts and jointly stuffed QSystemTrayIcon maximum in QML.

So in this article you will see two implementations to work with an icon in the system tray.

The resulting application will minimize to the System Tray by clicking the icon in the system tray, as well as by pressing the close button. But only in the event that will be active the special checkbox to control the folding process of the application window to the system tray, if the checkbox is not enabled, the application will be closed. Also, the application can be closed with an active checkbox menu item in the system tray icon.

Oct. 26, 2015, 1:25 p.m.


Android, ListItem, ListModel, ListView, QML, Qt

I have already told in the article about the creation of dynamic widgets to Qt , how to create and delete buttons dynamically, as well as how to interact with them. And there used Vertical Layout, a case we can use QML ListView Qml, both similarly used when programming in Java for Android. That, incidentally, is also applicable when programming in Qt for Android.

The article about the dynamic creation of widgets used for example QButton class objects. This article will use the objects Button Qml, which customization was discussed in the following article . But the key will be placed in the ListView Qml.

Project structure for ListView Qml

This time dispense project created by default and even without the designer interface. Especially because at the time of this writing, not all parameters can be set in the designer. A following project structure:

  • - the profile of the project;
  • deployment.pri - deploy rules file on the target platform;
  • main.cpp - the main application startup file;
  • main.qml - qml file with the original program codes
Oct. 24, 2015, 3:30 a.m.


Android, Desktop, QML, Qt, scalable, scalable interface, масштабируемый интерфейс

If we talk about Scalable interface, that is scalable interfaces for developing applications on Qt, this is the main problem is that you need to create an interface that will be read perfectly on all screens, whether computer screen or a smartphone screen.

Parameters of the GUI, such as the width and height are specified in pixels in Qt , but with the same screen resolution on your computer and on your phone (for example, 1366 x 768 pixels) get completely different results. On your computer, button size 40 by 60 pixels would be convenient, I would even say a large, and on the screen of the smartphone is already on it will be difficult to get a finger.

Therefore the development of a single application interface for multiple platforms and screens must be some way to solve the interface problem of scalability.

Oct. 22, 2015, 12:40 p.m.


Qt, QML, Android, CalendarStyle, Calendar

In this lesson, I would like to talk about how you can customize the appearance of the Calendar object in Qt Qml. To correct such as color, font, and nicely fit it in the dialog box to select a date. Therefore, to determine the order, how it should work our app and how it should look:

  1. In the main window of the application will be a standard button, which displays the date (although if you want you can customize and her);
  2. Clicking the button opens a dialog box which houses the Calendar and two buttons ( "Ok" and "Cancel"). The Calendar set a date that was specified on the button;
  3. By clicking on the "Cancel" button nothing happens, but simply closes the dialog box;
  4. By clicking on the "Ok" button closes the dialog box, and the button of the main window displays the date that was selected in the calendar.

I believe that you have already noticed that the customization of the application interface in Qt QML passes the same as for the Desktop version, and for Android. Otherwise it would have to develop a cross-platform Qt was not considered. Therefore, I will not go into too much difference display settings dialog box for the Desktop version or the version for Android. This time I explained in the tutorial to create a customized dialog box .

Oct. 20, 2015, 12:06 p.m.


QML, Qt, animatedsprite, sprite, sprite sequence

Once on the sprites was written three lessons by drawing them to their practical application in Qt in this and this article, I believe that we can not ignore the use of sprites in QML Qt.

Sprites are used in QML is even easier than in Qt / C ++, QML because there are classes that are specifically designed to work with sprites: Sprite and AnimatedSprite.

The project structure to work with Sprite and AnimatedSprite

The project is created as a standard project QtQuick with controls, and then I throw out all superfluous Tipo menyubara and buttons. I am leaving only that we will use for demonstration.

  • main.cpp - the main project file that runs qml file;
  • main.qml - application window;
  • MainForm.ui.qml - form to work with the designer;
  • sprite_sheet.png - the image of our sprite.
Oct. 19, 2015, 1:23 p.m.


GameDev, Bullet, QPixmap, Qt, sprite, sprite sheet, explosion. взрыв, Спрайт

In previous articles we have learned to draw a sprite image and apply it to Qt via QPixmap so we turned animated explosion. And now we need to put this very explosion at precisely the place where the bullet hits. That is, the bullet will explode.

For the implementation of this ideas will add class sprite from the past lessons, and modify it. The fact is that the sprite object is a class inherited from QGraphicsItem , and therefore a bullet when confronted with the explosion of another bullet will behave as well as in a collision with an obstacle or a target. Therefore it is necessary to do so to ignore the bullets from the other explosions and bullets flying through.

Project structure

The project is subject to modification in the sense that a new class is added to the following files:

  • sprite.h
  • sprite.cpp

This class will be called animated sprite explosion, after which this frame object will be removed from the graphic scene.


Hello, Dear Users of EVILEG!!!

If the site helped you, then support the development of the site financially, please.

You can do it by following ways:

Thank you, Evgenii Legotckoi

Dec. 9, 2019, 12:46 p.m.

C++ - Тест 003. Условия и циклы

  • Result:78points,
  • Rating points2
Dec. 9, 2019, 4:49 a.m.

C ++ - Test 004. Pointers, Arrays and Loops

  • Result:20points,
  • Rating points-10
Dec. 9, 2019, 3:29 a.m.
Nikolaj Batmanov

C++ - Test 002. Constants

  • Result:58points,
  • Rating points-2
Last comments
Dec. 9, 2019, 3:41 a.m.
Evgenij Legotskoj

Эта ошибка invalid use of incomplete type ‘class Ui::AnotherWindow’ обычно говорит о том, что не найдено определение класса или структуры. Типичная проблема - не подключён заголовочны…
Dec. 9, 2019, 3:36 a.m.
Nikolaj Batmanov

Ну, не настолько со мной всё полхо...))) Вроде бы. Я ж кнопки отрисовываю.
Dec. 9, 2019, 3:14 a.m.
Evgenij Legotskoj

Добрый день. У вас ui файлов по ходу нет. UI файлы используются для вёрстки в графическом дизайнере.
Dec. 9, 2019, 3:05 a.m.
Nikolaj Batmanov

Здравствуйте! Полностью скопировал ваш пример к себе, чтобы разобраться. А он не хочет запускаться, дает ошибку: invalid use of incomplete type ‘class Ui::AnotherWindow’ ui(new Ui…
Dec. 8, 2019, 7:23 a.m.
Evgenij Legotskoj

У меня здесь есть одна старая статья с примером векторного редактора. Там есть ответы на ваши вопросы. Поизучайте Qt/C++ - Урок 072. Пример векторного редактора на Qt QGraphicsItem, QG…
Now discuss on the forum
Dec. 9, 2019, 7:16 a.m.

Я сделал простой вывод текста по испусканию сигнала... Чего не хватает программе?) Python: # системные библиотекиimport cv2import numpy as npimport sysimport threading# PyQt б…
Dec. 8, 2019, 4:11 p.m.
Semen Kosandjak

інтерфейс qt, приклад того додаю на малюнку, я натискаю на кнопку і у мене з'являється 2 текст лайну в які я вводжу значення, тобто в 1 цифри,у другому випадку це літери, тобто c++, без графічно…
Dec. 8, 2019, 10:21 a.m.

Тут не подскажу, пишу на питоне.)
Dec. 8, 2019, 5:31 a.m.

Всем привет. Впервые столкнулся со сборкой buildroot и наткнулся на пару странных ошибок. Надеюсь кто то прочитавший сможет что то подсказать, так как мне пока они не понятный. Пе…
Dec. 5, 2019, 4:12 p.m.
Evgenij Legotskoj

Это уже кастомная стилизация. Придётся отключать обрамление и самостоятельно реализовывать ресайз окна, его перемещение, стиль и т.д. Вот статья, как отключить обрамление окна - QML …
© EVILEG 2015-2019
Recommend hosting TIMEWEB