Category Archives: QML

How I fixed wrong colors in my QML app on Android

I removed android:theme from AndroidManifest.xml:

<activity android:name="net.geographx.MainActivity"
    android:configChanges="orientation|uiMode|screenLayout|screenSize|smallestScreenSize|layoutDirection|locale|fontScale|keyboard|keyboardHidden|navigation|mcc|mnc|density"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:launchMode="singleTask"
    android:screenOrientation="portrait"
    android:exported="true">
    <!-- Splash screen -->
    <meta-data android:name="android.app.splash_screen_drawable" android:resource="@drawable/splash"/>
    <!-- Splash screen -->
(more…)

Make QML menu width fit the content

Found an implementation here and added two pixels:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Menu {
    width: {
        var result = 0;
        var padding = 0;
        for (var i = 0; i < count; ++i) {
            var item = itemAt(i);
            result = Math.max(item.contentItem.implicitWidth, result);
            padding = Math.max(item.padding, padding);
        }
        // It looks like two pixels are missing to remove the ellipsis.
        // My first idea was that it is leftInset + rightInset, but it does not work.
        var missing = 2;
        return result + padding * 2 + missing;
    }
}
(more…)

“Cannot anchor to a null item” waring in QML

The following QML code

Callout
{
    id: call

    //margins should bound but not assigned
    anchors.topMargin: root.above ? undefined : yMargin
    anchors.bottomMargin: root.above ? yMargin : undefined

    ...
}

produced “Cannot anchor to a null item” warning and worked incorrectly.

I tried to replace it with AnchorChanges and PropertyChanges:

(more…)

QML Application Style

There was qtquickcontrols2.conf in the root directory of my app sources with the following content:

; This file can be edited to change the style of the application
; See Styling Qt Quick Controls 2 in the documentation for details:
; https://doc.qt.io/qt-6/qtquickcontrols2-styles.html

[Controls]
;Style=Default
;Style=Universal
;Style=Material
Style=Fusion
;Style=iOS

[Universal]
Theme=Light
Accent=Steel

[Material]
;Theme=Light
Theme=Dark
;Accent=BlueGrey
;Primary=BlueGray
(more…)

My experimentation with QML Repeater

I was able to define a Repeater that displays cryptocurrency market orders:

(more…)

An example of real-time TableView in QML

Looks like CheckBox-es respond to clicks and work correctly even if they are in a TableView that is updated once a second:

(more…)

Using QML_ELEMENT with CMake

There is an example of using QML_ELEMENT in qt5\qtdeclarative\examples\quick\scenegraph\openglunderqml and qt_add_qml_module in CMake:

qt_add_qml_module(openglunderqml
    URI OpenGLUnderQML
    VERSION 1.0
    QML_FILES main.qml
    RESOURCE_PREFIX /scenegraph/openglunderqml
    NO_RESOURCE_TARGET_PATH
)

In QML it imports the module:

import OpenGLUnderQML 1.0
(more…)

Dragging a link from a browser to a QML app

When a link is dragged from a browser on Window 10 platform it contains the page title, but they did not make it accessible in QML:

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Scroll")
    id: root

    DropArea {
        id: dropArea;
        anchors.fill: parent
        onEntered: {
            root.color = "gray";
            drag.accept (Qt.LinkAction);
        }
(more…)

Assignment a property of type function in QML

It is possible to do this in QML:

Item
{
    property var refreshChart: function () {}

    Component.onCompleted:
    {
        refreshChart = function ()
        {
            console.log("Hello!")
        }
    }
}
(more…)

Multiple views with OsgQtQuick

I wrote a sample application using OsgQtQuick that shows the Earth in two views:

with the following QML, that I copied from OsgQtQuick samples:

(more…)