Qt 5.3: low start on mobile cross platform

Open the file main.qml. Remove the title, menuBar and Text. As a result, we should get:

import QtQuick 2.2 import QtQuick.Controls 1.1 ApplicationWindow { visible: true width: 640 height: 480 } 

ApplicationWindow is our root element to which children are added. It must be present in the main QML file. Immediately write two fields inside ApplicationWindow: id and objectName:

 ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 } 

The id will be used to access the ApplicationWindow inside the QML file, the objectName is needed to find our main window from QML in C ++ code.

Parameters width and height with fixed values ​​let them not confuse you yet. The interface will only be initially created with such dimensions, then stretch to fit the screen size of the smartphone. For this reason, a small jerking of the screen appears on Android when the application starts, how to fix it - I will describe it at the very end.

In general, syntax QML files are somewhat reminiscent of an explosive mixture of web layout and javascript logic, but the similarity is only partial. In QML, we can create not only an interface, but also logic (which is convenient, for example, to check the filling of forms), which is a plus.

Let's specify the color of our window, for this we add a line below the “height: 480” line in the ApplicationWindow

 color: "#F0F0FF" 

You can set a color with a hex code, some colors can be specified with a name, for example, “red”, “transparent”, etc. You can also use the created constant, more on this later. Now add to import:

 import QtQuick.Controls.Styles 1.2 

Styles will be needed to customize the controls. Create a button inside ApplicationWindow. Common Code:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height } } 

The width of the button is calculated relative to the width of the main window, height - relative to the height of the main screen. Here we see an example of accessing an element by id, elementary expressions for calculating the size and position of the button [see addition 1] . If we do not specify the id in front of the parameter in the expression (height in the calculation of y), then it is considered that the parameter of the current element, inside which we are, is used. All save and run:


The button appeared, its dimensions are calculated relative to the size of the open window (Desktop) or the screen of the mobile device, which, in my opinion, solves problems of the same interface mapping on different devices (which is what Android hemorrhoids are usually if you do not use custom classes to create the UI).

It's time to create a style for the new button! To do this, inside the Button add:

 style: ButtonStyle { } 

The style for the button will consist of two parts: background and label. We will create these parts in separate QML files in order not to overload the main one. To do this, we roll Qt Creator, go into the folder of our project and create a folder there «QMLs», so that the working files are neatly laid out on the shelves.

Return to Qt Creator. Right-click on the project name in the tree (Sample) -> in the context menu, select "Add a new ...". Then select Qt, “QML File (Qt Quick 2)”:


The name is “ButtonBackground”, the path is set to the folder “QMLs” just created:


Check the prefix, version control is not needed, so just click "Finish":


Similarly, create the file “ButtonLabel.qml”. Now our project looks like this:


Double-click on “QMLs / ButtonBackground.qml”. Edit it as follows:

 import QtQuick 2.2 Rectangle { anchors.fill: parent anchors.margins: 4 border.width: 2 border.color: "#FFFFFF" radius: height / 4 gradient: Gradient { GradientStop { position: 0; color: control.pressed ? "#00AAAA" : "#AAFFFF" } GradientStop { position: 1; color: "#00CCCC" } } // color: "#00AAAA" // opacity: 0.25 } 

In order:
- anchors.fill: parent — so that the button background fills it completely, parent — a call to the parent element within which the current element is located;
- anchors.margins: 4 - set small indents from all sides;
- border - setting the stroke [see addition 8] ;
- radius: height / 4 - it's already interesting here; in this case, serves to round the corners (the value is calculated relative to the button height), but if you set the width and height of the Rectangle to be the same, then a sufficiently large radius value allows you to get a circle from the Rectangle;
- gradient consists of two points; Pay attention to the first point (with a zero position) - here we refer to the state of the button (control.pressed) to determine the color depending on the button pressed, we use a simple conditional operator: condition? action in case of truth: action if false;
- we can set a color instead of a gradient, for example, you can also use transparency (opacity: from 0 to 1).

Save “ButtonBackground.qml”, back to “main.qml”. Add to import our created folder "QMLs":

 import "QMLs" 

Now we have access to all QML files in this folder. Go back to the button style and set the newly created background. The result should be:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} } } } 

All save, run:


The button has become a little brighter, but it lacks a signature. Fix it. Open "ButtonLabel.qml", edit as follows:

 import QtQuick 2.2 Text { anchors.fill: parent horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter font.bold: true font.pixelSize: (mainWindow.width>mainWindow.height) ? parent.height/1.75 : parent.height / 2.5 color: "#005050" // text: "" } 

The caption completely fills the body of the button, is centered, has a bold face. The size of the signature is calculated relative to the current orientation of the screen: it is logical that with a larger width it will be landscape, and the height - portrait [see addition 2] . Here we will not install the button text, it is inconvenient.

Open the “main.qml” again. Add the newly created “ButtonLabel” in the label style, but here we immediately indicate the text of the button [see addition 3] . It turns out as follows:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } } } 

All save and run:


So, we have a clickable button, let's add a click handler for it, which will output a message to the log. To do this, add a line inside the button:

 onClicked: console.log("Button '' clicked") 

In the total:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: console.log("Button '' clicked") } } 

We start, we check. When you click on the button in the "Application Output" panel (at the very bottom of the Qt Creator window), a new line appears: "qml: Button 'Test' clicked":


At this point, we will complete the work with our button.

Open the "main.qml". Below the "Button" add:

 TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) { Qt.inputMethod.hide() event.accepted = true } } } 

Set the size, id will be needed to read the text from the field. We put the alignment in the center, indicate the placeholder.

We also add a simple regular expression for this input (the characters from 'a' to 'i' and from 'a' to 'z' in any case, no more than 16 characters in all).

Styles in the separate files will not be taken. Put a white rectangle on the background (background), set the colors for the input text and the placeholder. In the font, we customize the words with capital letters (font.capitalization = Font.Capitalize), bold and size (here we do not have access to the parent element, so we calculate the size relative to the height of the screen).

For "TextField", you can also add an inputMethodHints: field with a value, for example, Qt.ImhPreferNumbers. Depending on the value, different keypads for entry will be displayed (in the case of Qt.ImhPreferNumbers, a keyboard will appear for entering numbers [see Appendix 6] ). In this case, we will not add this field. There are also other useful parameters, for example, echoMode (you can set it to TextInput.Password to enter a password).

Separately, mention should be made of the expression inside Keys.onPressed. Here we are tracking the button press to complete the input, so that when you click on it, close the keyboard on Android devices. So, our "main.qml" finally looks like:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: console.log("Button '' clicked") } TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) { Qt.inputMethod.hide() event.accepted = true } } } } 

On the Android tablet and iPhone simulator, the current application looks like this:




To achieve logical completeness, let's also add a signature in which the greeting with our name will be displayed when you click on the button. After “TextField” in “main.qml” we add:

 Text { id: text y: textField.height width: parent.width height: parent.height / 10 font.pixelSize: height / 2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } 

The caption will be located immediately below the text entry field (y: textField.height), for it we will also set the word wrap. Again, the entire "Text" can be put into a separate QML file for convenience, in this case we will not do this.

It remains to register the logic of pressing the button. We can register all the desired actions in the onClicked buttons field, but this time let's create a function for this. This is what “main.qml” will look like with the added function for the button:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { function hello() { if (textField.text != "") { text.text = ", <b>" + textField.text.toUpperCase() + "</b>!" } } width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: hello() } TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) { Qt.inputMethod.hide() event.accepted = true } } } Text { id: text y: textField.height width: parent.width height: parent.height / 10 font.pixelSize: height / 2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } } 

As you can see, the text can be formatted (in this case tags) Save, run and check:

In this example, we will make two lists at once to show more features of the ListView. Add to "main.qml" below "Text":

 ListView { id: lvList objectName: "lvList" y: text.y + text.height width: parent.width height: parent.height * 0.3 clip: true spacing: 8 model: ListModel { ListElement { name: " 0" } ListElement { name: " 1" } ListElement { name: " 2" } } delegate: Rectangle { width: lvList.width height: lvList.height / 3 color: "#00AAAA" Text { text: name } MouseArea { anchors.fill: parent onClicked: console.log("ListView el#" + index + " clicked!") } } } 

We set identifiers and sizes of ListView. By itself, the ListView is transparent; we will not make a substrate for it.

The clip parameter is set to true: this needs to be done because otherwise, when scrolling through the list, items that become visible in the list crawl out of the bounds of the ListView.

The spacing parameter sets indents between list elements.

Next, model is essentially our data model. It is filled with the “ListModel” element, which contains several “ListElement”. “ListElement” is actually an element of our list, inside we can register the desired name-value pairs, in this case there will be only one pair.

The delegate parameter determines how each item in the list will look. With us it will be just a rectangle with the text inside. For the value of the text parameter, we specify the name parameter previously written in the model.

“MouseArea” is an area in which we can track mouse clicks or touch the screen. We fill it in by the size of the delegate. In the case of clicking, we output the index of the element to the log. Note that MouseArea also has useful onPressed fields.
and onReleased.

In general, the model prescribed in QML, we will not be needed in the future, because the backend will do the filling. However, it is convenient to make such stubs to customize the appearance of the list. It is also desirable for convenience to make clearance delegate in a separate QML-file. Well, and add that ListView has a lot of different parameters that you can try to tweak. But here we will not complicate anything else. Let's see what happened. Save, run:


Let's try to click on the elements of the list and check the log, we should have lines like “qml: ListView el # 0 clicked!”.

Go to the second list. Add below the first list:

 ListView { id: lvPager y: lvList.y + lvList.height width: parent.width height: parent.height * 0.2 clip: true model: ListModel { ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Moscow" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=London" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Rio" } } delegate: Image { width: lvPager.width height: lvPager.height source: map_url fillMode: Image.PreserveAspectFit } orientation: ListView.Horizontal snapMode: ListView.SnapOneItem } 

As models, we use links to returned images of maps. The delegate will be the image itself, the source of which (source) will be the reference specified in the model. You can also specify a local file as a source. For this you need:
- add an image to the project folder;
- in Qt Creator in the project tree, right-click on “qml.qrc” -> “Open in editor”;
- in the opened window “Add” -> “Add files” -> select the added image;
- in the “Image” of the QML file, specify as source the path to the image as follows: “qrc: / full_file_name”.

For “Image”, we also set fillMode so that the picture itself adapts to the required width / height dimensions while preserving the proportions.

The orientation parameters (set to horizontal orientation) and snapMode: ListView.SnapOneItem allow us together to achieve the effect that ListView becomes something like a ViewPager in Android.

Almost done. Now, in the project tree, open the file “Sample.pro” and add “network” to the line “QT + = qml quick widgets”, otherwise the connection to the network will not work:


Just in case, I post a listing of all the code “main.qml”:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { function hello() { if (textField.text != "") { text.text = ", <b>" + textField.text.toUpperCase() + "</b>!" } } width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: hello() } TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return) { Qt.inputMethod.hide() event.accepted = true } } } Text { id: text y: textField.height width: parent.width height: parent.height / 10 font.pixelSize: height / 2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } ListView { id: lvList objectName: "lvList" y: text.y + text.height width: parent.width height: parent.height * 0.3 clip: true spacing: 8 model: ListModel { ListElement { name: " 0" } ListElement { name: " 1" } ListElement { name: " 2" } } delegate: Rectangle { width: lvList.width height: lvList.height / 3 color: "#00AAAA" Text { text: name } MouseArea { anchors.fill: parent onClicked: console.log("ListView el#" + index + " clicked!") } } } ListView { id: lvPager y: lvList.y + lvList.height width: parent.width height: parent.height * 0.2 clip: true model: ListModel { ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Moscow" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=London" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Rio" } } delegate: Image { width: lvPager.width height: lvPager.height source: map_url fillMode: Image.PreserveAspectFit } orientation: ListView.Horizontal snapMode: ListView.SnapOneItem } } 

We can run and see what happened:


In my opinion, working with ListView in QML is very simple and convenient, there are many possibilities for customization. With the help of ListView, you can also implement, for example, Spinners (pop-up lists), playing with the visibility (visible field) of the list.

IMPORTANT NOTE: for some reason, Habr replaces ¢ er in “map_url” with a cent symbol. Note that the request link must be & center = ... but without a space.

“Loader” is an entity that allows multi-windowing in QML. In essence, “Loader” is just some container that has a QML file as a source (in theory, you can even locate this file somewhere on an external server). It is very important here, if we refer to some element inside the Loader from QML or C ++ code, it is necessary that the container containing this element is currently loaded into the Loader, otherwise the application will crash. It is logical that we cannot access an element that does not exist at the moment, much less ask Qt to change some of its properties. You can solve the problem by keeping the boolean-flag about the activity of a specific container or at a dangerous moment (for example, when connecting to the server) to prohibit switching the contents of the loader (you can put enabled: false on the navigation buttons).

So, we will create two QML files in the QMLs folder of our project. Let's call them "Loader1.qml" and "Loader2.qml". "Loader1.qml":

 import QtQuick 2.2 Rectangle { anchors.fill: parent color: "green" opacity: 0.2 } 

Just a green rectangle. Now "Loader2.qml":

 import QtQuick 2.2 Rectangle { id: rect anchors.fill: parent focus: true color: "blue" opacity: 0.2 SequentialAnimation { running: true loops: SequentialAnimation.Infinite PropertyAnimation { target: rect; property: "opacity"; to: 0; duration: 500 } PropertyAnimation { target: rect; property: "opacity"; to: 0.2; duration: 500 } } Keys.onPressed: { if (event.key == Qt.Key_Back || event.key == Qt.Key_Escape) { loader.source = "qrc:/QMLs/Loader1.qml" event.accepted = true } } } 

Be sure to specify focus: true. Otherwise, the Keys.onPressed section will not work.

"SequentialAnimation" - a consistent set of animations. Specify the parameter running: true, so that the animation will immediately work, loops (number of repetitions) set to infinity.

Inside SequentialAnimation has two PropertyAnimations. They are able to change any parameter (property) of the target element (target) to the desired value (to) for a certain time (duration).

I note that after stopping the animation (if we set running: false), you need to “manually” return all changed target parameters to the original ones.

It remains to create the Loader itself inside "main.qml":

 Loader { id: loader y: lvPager.y + lvPager.height width: parent.width height: parent.height * 0.2 focus: true source: "qrc:/QMLs/Loader1.qml" } 

Be sure to specify focus: true, so that the internal element (source) tracks button presses.

A small nuance: after working with a text field, the loader loses focus. , Keys.onPressed :

 Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return || event.key == Qt.Key_Back) { Qt.inputMethod.hide() loader.forceActiveFocus() event.accepted = true } } 

«main.qml», :

 Button { width: mainWindow.width / 4.5 height: mainWindow.height / 10 x: mainWindow.width / 2 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "Loader" } } onClicked: loader.setSource("qrc:/QMLs/Loader2.qml") } 

«main.qml»:

 import QtQuick 2.2 import QtQuick.Controls 1.1 import QtQuick.Controls.Styles 1.2 import "QMLs" ApplicationWindow { id: mainWindow objectName: "mainWindow" visible: true width: 640 height: 480 color: "#F0F0FF" Button { function hello() { if (textField.text != "") { text.text = ", <b>" + textField.text.toUpperCase() + "</b>!" } } width: mainWindow.width / 2.5 height: mainWindow.height / 10 x: 0 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "" } } onClicked: hello() } TextField { id: textField width: parent.width height: parent.height / 10 horizontalAlignment: Text.AlignHCenter placeholderText: " " validator: RegExpValidator { regExp: /[--a-zA-Z]{16}/ } style: TextFieldStyle { background: Rectangle {color: "white"} textColor: "#00AAAA" placeholderTextColor: "#00EEEE" font: font.capitalization = Font.Capitalize, font.bold = true, font.pixelSize = mainWindow.height / 25 } Keys.onPressed: { if (event.key == Qt.Key_Enter || event.key == Qt.Key_Return || event.key == Qt.Key_Back) { Qt.inputMethod.hide() loader.forceActiveFocus() event.accepted = true } } } Text { id: text y: textField.height width: parent.width height: parent.height / 10 font.pixelSize: height / 2 horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } ListView { id: lvList objectName: "lvList" y: text.y + text.height width: parent.width height: parent.height * 0.3 clip: true spacing: 8 model: ListModel { ListElement { name: " 0" } ListElement { name: " 1" } ListElement { name: " 2" } } delegate: Rectangle { width: lvList.width height: lvList.height / 3 color: "#00AAAA" Text { text: name } MouseArea { anchors.fill: parent onClicked: console.log("ListView el#" + index + " clicked!") } } } ListView { id: lvPager y: lvList.y + lvList.height width: parent.width height: parent.height * 0.2 clip: true model: ListModel { ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Moscow" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=London" } ListElement { map_url: "http://maps.googleapis.com/maps/api/staticmap?size=640x320&scalse=2&sensor=false¢er=Rio" } } delegate: Image { width: lvPager.width height: lvPager.height source: map_url fillMode: Image.PreserveAspectFit } orientation: ListView.Horizontal snapMode: ListView.SnapOneItem } Loader { id: loader y: lvPager.y + lvPager.height width: parent.width height: parent.height * 0.2 focus: true source: "qrc:/QMLs/Loader1.qml" } Button { width: mainWindow.width / 4.5 height: mainWindow.height / 10 x: mainWindow.width / 2 y: mainWindow.height - height style: ButtonStyle { background: ButtonBackground {} label: ButtonLabel { text: "Loader" } } onClicked: loader.setSource("qrc:/QMLs/Loader2.qml") } } 

url (& center) , . , :




«Loader» . Android- «Back», .

UI QML C++ .