QML and Qt Quick

If you are using Cmake then you have to tell where to find files that implement classes using QML_ELEMENT macro

# Add include directories so target can find the QMLELEMENTS set(QML_INCLUDES ${CMAKE_CURRENT_SOURCE_DIR}/path/to/src ) # Add includepaths target_include_directories(target PRIVATE ${QML_INCLUDES} )

Oh, the MapView captures focus. Not a problem as much as I thought it'd be Would be a problem if you had Map out of a MapView, however, and tried to capture MouseArea events within that. Code I used for testing purposes with MapView coming from a StackOverflow post. Seems to work fine in terms of being able to scroll and navigate map without one affecting other

ScrollView { id: add_scrollbar_to_testing_grounds_container width: parent.width height: parent.height ColumnLayout { MapView { id: mapview Layout.minimumHeight: 500 Layout.preferredHeight: 500 Layout.fillWidth: true map { plugin: Plugin { name: "osm" PluginParameter { name: "osm.mapping.providersrepository.disabled" value: "true" } PluginParameter { name: "osm.mapping.providersrepository.address" value: "http://maps-redirect.qt.io/osm/5.6/" } } center: QtPositioning.coordinate(59.91, 10.75) // Oslo zoomLevel: 14 } } Text { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus felis quis elit tincidunt, id dignissim nulla suscipit. Nam elementum dolor in libero facilisis, id ullamcorper velit hendrerit. Proin sed nisi ut erat vehicula tincidunt. Integer non felis et felis ultricies luctus. Etiam a justo ligula. Vestibulum vitae turpis orci. Curabitur ultricies ante nec nulla fermentum, eu laoreet augue tempus." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } Text { text: "Vestibulum quis nunc quis ligula interdum convallis. Aenean suscipit tristique felis, nec gravida dui placerat et. Nulla facilisi. In hac habitasse platea dictumst. Integer nec velit eget dui aliquam vulputate. Cras tristique malesuada neque sit amet sollicitudin. Curabitur volutpat dui sit amet auctor auctor." wrapMode: Text.Wrap width: parent.width font.pixelSize: 18 padding: 10 } } }

https://bugreports.qt.io/browse/QTBUG-133587

That means error so nothing is displayed.
https://doc.qt.io/qt-6/qml-qtquick-image.html#status-prop

If I use

source: StandardPaths.writableLocation(StandardPaths.HomeLocation) + "/qtpdfbug/qtlogo.pdf"

It works.

While this works only if I use qml6 with file and not when I launch the app.

source: "/home/user/qtpdfbug/qtlogo.pdf"

Using this always work

source: "file:///home/user/qtpdfbug/qtlogo.pdf"

Seems like a major overlook to me.
Thanks for the feedback.

From what I see, the vertical line is a QFrame element with VLine settings.

Using stackoverflow.com/review/suggested-edits/36711790, that:

separator_line = PyQt6.QtWidgets.QFrame() separator_line.setFrameShape(PyQt6.QtWidgets.QFrame.Shape.HLine) separator_line.setFrameShadow(PyQt6.QtWidgets.QFrame.Shadow.Sunken)

...seems to render in the correct orientation for me:

Before

0dd1b2f4-2c92-4fd0-8f95-d070c0a84640-Screenshot_20250209_190842.png

Afterward

...albeit invisibly (it should be between "Modify" and "Overflow"):

62ba634c-b9d0-4bb7-9169-c8332fa1aa65-Screenshot_20250209_193706.png

I bet you guys thought I'd forgotten about this...

So, I've added this to my CMakeLists.txt file:

add_compile_definitions( CMAKE_BINARY_DIR="${CMAKE_BINARY_DIR}" CMAKE_PROJECT_NAME="${CMAKE_PROJECT_NAME}" )

And, in my main.cpp:

QString stylePath = CMAKE_BINARY_DIR; stylePath.append("/"); stylePath.append(CMAKE_PROJECT_NAME); stylePath.append("/QtQuick/VirtualKeyboard/Styles/test"); stylePath = QDir::toNativeSeparators(stylePath); qputenv("QT_VIRTUALKEYBOARD_STYLE", stylePath.toUtf8()); QGuiApplication app(argc, argv); QQmlApplicationEngine engine; engine.addImportPath(":/QtQuick/VirtualKeyboard/Styles/test");

But at runtime, I get a warning:

WARNING: Cannot find style "C:\\Users\\michael.zimmers\\Qt_projects\\keyboard\\build\\Desktop_Qt_6_8_1_MinGW_64_bit-Debug\\keyboard\\QtQuick\\VirtualKeyboard\\Styles\\test" - fallback: "default"

Does anyone have an idea as to what am I missing?

Thanks...

@afalsa thanks for those links. I have only looked at the first one and skim read it, but it seems like they ended up with a very similar solution to mine. That is reassuring in the sense that there doesn't seem to be a much simpler approach that I missed. I don't recall finding that page when I had the issue, but I suspect I was grappling with it a year or two before that was written.

According to the documentation, https://doc.qt.io/qt-5/qml-qtquick-virtualkeyboard-inputcontext.html#preeditText-prop:

preeditText : string

This property sets the pre-edit text.

The property isn't marked read-only, indicating that an application can assign to it.

@JoeCFD said in a generic qml label for display of an image and a text:

any recommendations for making a generic qml label to display an image and a text?

If by "image and text" you mean a label that displays an icon (e.g., SVG) alongside text, you can use the IconLabel type. While there is no official documentation for it, you can view its source code. It allows you to assign text, an icon, and even customize the layout.

For example, this is how it is used in a Button:

Button { id: control property real radius: 0 implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset, implicitContentWidth + leftPadding + rightPadding) implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset, implicitContentHeight + topPadding + bottomPadding) opacity: control.enabled ? 1 : 0.5 padding: 6 spacing: 6 icon.width: 24 icon.height: 24 contentItem: IconLabel { id: iconLabel spacing: control.spacing mirrored: control.mirrored display: control.display // Controls Layout icon: control.icon // Icon text: control.text // Text font: control.font } }

If by "image" you mean PNG or other non-icon image types, your best option is to use an Image type alongside a Text or Label type within a layout.

I don’t see any other straightforward approach.

I decided to follow Bob's suggestion to replace moveRows with removeRows followed by insertRows and it seemed to work out for me. Thank you all for the suggestions.

I'm seeing the same thing on my Ubuntu desktop. Does anyone know of a current bug report for this?

Thank you, @GrecKo !
That helped a lot. Just adding it as you suggested didn't work, but in combination with the following on the control level works good.

containmentMask: QtObject { function contains (point: point) : bool { return control.contentItem.contains(point) || control.indicator.contains(point) } }

You're welcome !

You know, inverting lines can happen quickly and innocuously :-)
Anyway, now you're back on track.

Thanks for the feedback and bug reports !

I am also facing the same issue. Have you found any solution for this?

@Bob64 Thank you, just using 'type' worked! I knew it would be something simple like this. And @GrecKo thanks for the tip, that looks like a better solution so ill definitely look into it.