I've got a qml based application which renders fine as long as it is not maximized. The error occurs to different extend on different platforms and on resizing/unmaximizing the window everything goes back to normal. On linux it looks like the window freezed but if you resize it you will see that e.g. previous button clicking indeed triggered something but no visual update was shown during that time. On windows (7), updates and reacting to user input is shown but there are a lot of artifacts duplicating the state before the window was maximized that wont disappear until resizing, so a portion of the window is not refreshed here too
Does somebody have any idea by what may cause this behavior? Can I - in the worstcase - disable that the window can be maximized?
Edit:
I tested it with a minimal qt quick controls 2 template application again without modification and i have the same behavior (tested on ubuntu)
The example I used is quite simple and still the issue is still present:
import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
SwipeView {
id: swipeView
anchors.fill: parent
currentIndex: tabBar.currentIndex
Page1 {
}
Page {
Label {
text: qsTr("Second page")
anchors.centerIn: parent
}
}
}
footer: TabBar {
id: tabBar
currentIndex: swipeView.currentIndex
TabButton {
text: qsTr("First")
}
TabButton {
text: qsTr("Second")
}
}
}
Its the simple template from New Project > Applications > Qt Quick Controls 2 Application in Qt Creator. I tested it with Qt 5.9.1 and 5.10.0
Maybe a general qt problem in conjuction with graphics drivers?
Related
When I create a tumbler widget in QML, I can grab it, and change the contents. As soon as I leave the widget with my mouse in vertical direction, the tumbler stops changing its contents. It works fine if I leave the widget to the left or right. In that case, I can operate the tumbler even when the mouse leaves the QML window.
Is there anything I missed?
Example code:
import QtQuick 2.5
import QtQuick.Controls 2.5
Rectangle {
width: 1000
height: 600
Tumbler {
anchors.centerIn: parent
model: 24
width: 30
height: 100
}
}
I'm using QT 6.2.1 and tried it on Kubuntu 20.04 and Yocto Dunfell.
I tried the same thing with a QML Dial. Herewith I can leave the widget in all directions, and it still reacts to my mouse movement.
Background: I have a side project that I'm working on that's gonna be a "rolling" project that I'll be updating as I learn and grow as a programmer. Since this project will be growing with me I wanted to learn how to create a GUI that can be simple but also gives me the ability to really customize the GUI once I really feel comfortable with it. After feeling overwhelmed with options I landed on PySide6 and QML but I'm running into an issue with the QML file.
The tutorial I'm following is Python-QML integration (https://doc.qt.io/qtforpython/tutorials/qmlintegration/qmlintegration.html) and I'm using the .py and .qml files linked at the bottom of the tutorial page. For an IDE if it matters I'm using Pycharm and have PySide6 package added to the project as well as the QML Editor plug-in.
Problem: The issue that I'm having is with the .qml file. For some reason, it's not recognizing the vertical bar used in the two-dimensional flag to center my RowLayout vertically and horizontally. When I hover my cursor over the vertical bar I get a tip saying that one of multiple different symbols like commas, parenthesis, or braces were expected but instead got '|'.
ColumnLayout {
id: rightcolumn
spacing: 2
Layout.columnSpan: 1
Layout.preferredWidth: 400
Layout.preferredHeight: 400
Layout.fillWidth: true
RowLayout {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
Button {
id: red
text: "Red"
highlighted: true
Material.accent: Material.Red
onClicked: {
leftlabel.color = bridge.getColor(red.text)
}
}
}
I feel like I've checked everywhere Reddit, stack overflow, the documentation on the QT site, but can't find anyone else that's experienced this.
The main issue is that setting Qt.AlignVCenter in a child of a ColumnLayout doesn't make sense since Layouts only honor alignment orthogonal to the direction of their layout. So, setting a vertical alignment on a vertically oriented layout won't do anything.
In this case, since you've simplified the example (specifically, all of your layouts only have one child), you don't really need any layouts at all. Instead, I would convert the ColumnLayout to an Item and then anchor the Button in the center of it like this:
Item {
id: rightcolumn
Layout.columnSpan: 1
Layout.preferredWidth: 400
Layout.preferredHeight: 400
Layout.fillWidth: true
Button {
id: red
anchors.centerIn: parent
text: "Red"
highlighted: true
Material.accent: Material.Red
onClicked: {
leftlabel.color = bridge.getColor(red.text)
}
}
}
I am porting an iOS app to Qt/QML targeting an Android tablet.
I would like to keep the app's behavior similar to the original iOS version, which is based on a UISplitViewController.
In other words, I need to build a master-details view using the tablet in landscape mode.
In order to achieve this, I was thinking of using ListView backed by a ListModel as the master view so that whenever an item is selected in the ListView, a details view is dynamically displayed.
At the moment I am struggling to get even the basics right. Forgive me in advance if my questions seem too broad but here are a couple of stumbling blocks I am facing right away:
Most examples I have seen in QML seem to "hardcode" the device's screen size. For example, a typical skeleton project in Qt Creator will consist of the following code:
ApplicationWindow {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Page1 {
}
}
As illustrated above the width and height properties of the window are hard-coded. In practice I need to set these values dynamically depending on the screen size of the physical device. How can I achieve this?
I also need to size my application screen in order to leave some space for the status bar area at the top of the screen (the area where the battery charge level is displayed).
Any code snippets to as well as pointers to online docs illustrating how to achieve this will be very appreciated!
Edit: Here is an updated main.qml, which sets the size of the application window using the device's screen size:
ApplicationWindow {
id: appWindow
visible: true
width: Screen.width
height: Screen.height
title: qsTr("Hello World")
Page1 {
}
}
The width, height and position of the application window can be further adapted to not overlap on the status bar area of the device.
However I am still stuck with the layout orientation, which defaults to portrait. How do I change the orientation of the layout to landscape?
Here is what I use:
// in the main window
property bool desktop: {
switch (Qt.platform.os) {
case "android":
case "ios":
case "winphone":
case "winrt":
return false
default: return true
}
}
visibility: desktop ? Window.AutomaticVisibility : Window.Maximized
As for forcing landscape orientation, add the following to the AndroidManifest.xml file in your project folder / android (not the one in the build directory) in the manifest -> application -> activity properties section:
android:screenOrientation="landscape"
I have a QQuickView inside another widget using createWindowContainer() (see image below). The QML scene file of the QQuickView looks something like:
//import related modules
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Window 2.2
import QtMultimedia 5.6
Rectangle {
width: 200
height: 100
color: "red"
...
}
I can see the qml object in the QQuickView, but what I'd really like is to be able to resize the QML scene to fit the container. I've looked at various docs and haven't found a way to reference the container in the QML scene to properly resize. Is that possible? Something like this?
Rectange {
width: Container.width
height: Container.height
}
Just remove size setting and add anchors.fill: parent to the
Rectangle. Another way is to set
view->setResizeMode(QQuickView::SizeRootObjectToView); in C++
Using the solution folibis provided works great (the first one).
This question is a little specific, but I've been unable to find someone with the same problem or a clean solution to the problem.
I'm creating a Qt Quick program, and I want to use a QListView as it appears in QtWidgets. This QtWidgets program has three such views, with checkable items (which is optional: not all QListViews have checkable items).
Because Qt Quick Components doesn't appear to have a QListView equivalent, I set out to make my own from existing components. And the result is ... meh. It looks like this and doesn't exactly behave in the same fashion. Clicking on the text/whitespace of an item checks the item, instead of highlighting it. And the border is just ugly, and doesn't appear in GTK-themed environments. It also doesn't obey custom desktop themes, because the background of the items will always be white.
The code for this custom component is fairly brief, and looks like this:
import QtQuick 2.4
import QtQuick.Controls 1.3
// GroupBox creates a border... most of the time. Not in GTK envs
GroupBox {
id: root
property var model: null
// This wraps the ListView up with a scrollbar
ScrollView {
anchors.fill: parent
ListView { // This is the view component
anchors.fill: parent
model: root.model
// This is the white box that the CheckBox is drawn on
delegate: Rectangle {
width: parent.width
height: box.height
// This is the actual item
CheckBox {
id: box
anchors.fill: parent
text: thing // `thing` is just a placeholder value from the model
}
}
}
}
}
Use a QApplication instead of a QGuiApplication. It will require you to add widgets support (and ship Qt widgets libs). This way, Qt Quick Components will automatically get access to much more system theming like background color in text selection.
Additionally, SystemPalette will provide you with a bunch of native colors that you can use if you want.
Unsatisfying system integration using QGuiApplication:
Nice integration using QApplication: