Category Archives: QML

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…)

Qt Quick Controls 2 has TableView but without the header yet

QT 5.13 supports SplitView and TableView but without TableHeader yet. Probably TableHeader can be implemented with the overlays. And there is an interesting example of implementation of table header with the source code.

The information provided below is outdated.

Qt Quick Controls 2 does not support TableView and looks like they are not going to support it, some notable missing features from Qt Quick Controls 1 also are Action, SplitView and TreeView, so the following QML code would not work:

TableView {

    TableViewColumn {
        role: "time"
        title: qsTr("date/time:")
        width: parent.width - 30
    }

    TableViewColumn {
        role: "score"
        title: qsTr("result:")
        width: 30
    }

    model: boardModel.list

    ScrollIndicator.vertical: ScrollIndicator { }
}

But there is a solution with ListView, so there can be something like this:

(more…)