I have a QML-based GUI with a fixed width that uses the TabView type in several places.
On one page, I have something like this (leaving out most properties except for lateral anchors):
ColumnLayout {
MyTabsViewSubmenu { // defined below
Layout.fillWidth: true
Tab {
id: someId
title: someString
anchors.fill: parent
SomeCustomClass {
id: someId2
anchors.fill: parent
}
}
// three more tabs defined the same way, with the same anchors...
}
// another item below the tabs...
}
MyTabsViewSubmenu is something like this:
TabView {
Rectanble {
anchors.fill: parent
}
style: TabViewStyle {
// miscellaneous style stuff
}
}
One of my four tabs in the ColumnLayout above sometimes stretches off the screen when selected. As far as I can tell, there is nothing special about it compared to the other items used as tabs throughout the GUI. The layout of this tab is something like this:
Item {
MyTabsViewSubmenu {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: sibling.top
Tab {
// no anchors (see below)
SomeItem {
anchors.fill: parent
}
// ... other tabs....
}
Rectangle {
id: sibling
anchors.left: parent.left
anchors.right: parent.right
// ... stuff....
}
}
The entire page stretches off the screen: both the sub-tab content and the content in the Rectangle I've shown here as sibling.
I would suspect that possibly the missing anchors.fill: parent in the innermost Tabs might be the problem, except that sibling is not (as far as I can tell* missing any anchors, and I've never seen the tabs stretched offscreen without the sibling being stretched offscreen as well.
It seems entirely unpredictable whether the stretching occurs or the layout is done correctly. Once the layout has stretched off the screen, I can sometimes get it to correct itself by navigating away from that page and back.
I'm using Qt 5.6.1-1 on Debian 7.
EDIT: When I navigate to the "stretched" tab and the bug occurs causing the stretching, the tabs themselves at the top of the page also get "stretched" somewhat. Returning to a different tab un-stretches the tabs.
The fix
Setting Layout.maximumWidth (as per Velkan's comment) appears to resolve the issue. Additionally, it appears to make the page load faster.
Observations and testing
It's now about a week and a half since I introduced this change to the code, and the product has been heavily tested since then.
We have discovered a second component that needs Layout.maximumWidth set in order to keep from stretching off the screen, and indeed applying this fix to both the original problematic components has prevented the screen-stretching bug. So this is definitely a valid fix.
Possible root cause (i.e. groundless speculation)
I suspect that the QML engine attempts to size "Layout" objects by starting with the maximum width, then shrinking them to fit (or something like this). If the maximum width is unset, it's set to something like "infinity". Without a maximumWidth, it appears that the auto-shrinking operation sometimes fails, leaving the component stretched offscreen. I suspect that the automatic-resizing code may be impacted by some kind of nondeterminism in the order in which the sizes of different QML components are computed.
Related
I am trying to make a very simple KDE-Plasma Widget where only a certain number is displayed. I want to make this displayed number have a font size as large as possible depending on the parent containing it.
Here is what it looks right now:
As you can see, the text inside has a lot of space around it. What I actually want it to be is something like the "Date And Time" Widget found in KDE Plasma (my widget is right next to it for comparison):
Here, the time displayed has much lesser space around it while also auto-resizing whenever the panel height is changed.
Here is what the current code looks like:
import QtQuick 2.6
import QtQuick.Layouts 1.0
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.plasmoid 2.0
Item {
id: main
anchors.fill: parent
Layout.minimumWidth: units.iconSizes.large
Layout.minimumHeight: units.iconSizes.large
Plasmoid.preferredRepresentation: Plasmoid.fullRepresentation
PlasmaComponents.Label {
id: display
anchors {
fill: parent
margins: Math.round(parent.width * 0.1)
}
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: foobar
font.pixelSize: 1000;
minimumPointSize: theme.smallestFont.pointSize
fontSizeMode: Text.Fit
font.bold: true
}
Timer {
some stuff
}
}
I tried looking into the code of the above Date and Time widget and wrote down the exact same layouts/controls (which is what you are seeing in the above code) with the same positioning/styling properties and yet I get a lot of space around my text/or the font size continues to remain small.
I tried your code and it resized the font correctly. For the spacing around the text, there are two points:
The spacing on the left and right is easily controlled by adjusting the margins value that you are using. For less space, try Math.round(parent.width * 0.05).
The spacing on the top and bottom is larger because the shape of your parent object is square, while the shape of the text is rectangular. In order to make the text fit the height of the square without exceeding the width of the square, the text would not just need to resize, it would need to be stretched vertically. But QML does not have an easy way to do that, and I doubt that's really what you want anyway.
EDIT:
And if you do want font stretching, I'll point you to this answer.
Thanks to #JarMan's input I was able to realize that my text was being rendered in small font because of lack of space due to the root (item) element being square in shape.
I have now figured that to change the layout sizes of the root element inside the KDE-Plasma panel, one needs to mess with Layout.preferredWidth and Layout.preferredHeight.
Here is what I did:
item {
.
.
Layout.preferredWidth: 150 * units.devicePixelRatio
Layout.preferredHeight: 50 * units.devicePixelRatio
.
.
}
Note: the 150 and 50 values aren't final. It basically gives an idea about the ratio at which the root element's width and height should be in (and I wanted a rectangle). It automatically resizes the inner content too as the Plasma Panel is resized.
The Qt QML based mobile/desktop convergent UI framework Kirigami provides a QML type ScrollablePage to support scrolling through content. Placing any visual QML item into it automatically makes it scrollable if it's larger than the ScrollablePage itself:
ScrollablePage is a Page that holds scrollable content, such as ListViews.
Scrolling and scrolling indicators will be automatically managed.
Kirigami.ScrollablePage {
id: root
//The rectangle will automatically be scrollable
Rectangle {
width: root.width
height: 99999
}
}
(source)
This provides scrollbars and allows scrolling with the mouse wheel, two-finger-scrolling with the touchpad and flicking ("click and throw") scrolling as we're used to from touchscreen devices.
However, it does not allow scrolling with any keyboard keys (Arrow Up / Down, Page Up / Down). How can I make that possible? The usual approach of doing Keys.onUpPressed: scrollBar.decrease() does not work because the ScrollablePage's scrollbar is not accessible as part of its public API.
Instructions
Use a Flickable to wrap the content items you put into your ScrollablePage. Then evaluate key press events in the Flickable and in response execute flick() to scroll the view. Example (combining examples from the Kirigami manual and from the Qt manual):
Kirigami.ScrollablePage {
id: root
Flickable {
focus: true
topMargin: 20; leftMargin: 20; bottomMargin: 20; rightMargin: 20
Keys.onUpPressed: flick(0, 800)
Keys.onDownPressed: flick(0, -800)
Rectangle {
width: root.width
height: 5000
}
}
}
Details and Explanation
While you can't access the scrollbar, you can access what the scrollbar uses to move the view: a Flickable instance. You just have to wrap it around the page's content. If you don't, ScrollablePage internally uses ScrollView to wrap your page's content in a Flickable anyway, but then you don't have a reference on it to execute flick().
Executing flick() does the same as when the user flicks the element, so the scrollbar position etc. will be updated alright.
If it still does not work, then (1) maybe you give too small pixel/second values to Flickable::flick() for scrolling to be visible or (2) maybe the initial Flickable::flickDeceleration values on your platform are messed up. These values are platform specific, so it can require some experimentation. On some platforms, setting them to zero during a flick() will help, while under Linux this is exactly the value preventing any scroll movement.
It is not necessary to enable ScrollablePage::keyboardNavigationEnabled for the above solution to work, since that is only for moving the currentItem of suitable content with the arrow keys (see below), and not for scrolling in general. It will even prevent ordinary scrolling in case your page content is an item view (ListView, GridView etc.).
Alternative solution for item views
If the content of your ScrollablePage is an item view (any QML object that has a currentItem property, such as ListView or GridView), then instead of wrapping that content in a Flickable just enable ScrollablePage::keyboardNavigationEnabled. It will allow you to move the currentItem with the Arrow Up and Arrow Down keys. That's what one usually wants for these views, even though it's not scrolling but rather keyboard navigation.
I have a visual tree of the following object:
Row {
spacing: 4
y: 1
U_Icon {
width: 48
height: 48
scale: (activeo === main.object ? 1.18 : 1) * (main.expand ? 1 : 0.75)
Behavior on scale { SpringAnimation { spring: 10; damping: 0.2; duration: 100 } }
color: activeo == object ? "white" : "#262626"
anchors.verticalCenter: parent.verticalCenter
}
Column {
spacing: -10
Text {
text: object.type + "type"
font.pointSize: 10
font.family: sysfont
}
Text {
text: "name"
font.pointSize: 20
font.family: sysfont
font.italic: true
font.letterSpacing: -1
}
}
}
The scale of the icon depends on whether the current object is selected or expanded. Expanding causes the object to draw its children objects. However, on re-expanding after contracting, depending on the tree structure, children objects are missing their text, which mysteriously reappears when another object is selected or created. Selecting another object might cause one, several or all missing texts to appear, the same goes for creating another object. When the tree is expanded, the texts are there for an instant, after which they disappear.
I made a few observations:
if the binding for the scale is only either of the two expressions without the other, the problem does not manifest
if the animation is removed, the problem does not manifest
interfacing the icon scale as an alias property of the row in order to move the binding out of the component and to the place it is instantiated has no effect, the problem persist
breaking down the binding expression by adding dedicated activefactor and expandfactor property for each expression and reducing the scale binding to activefactor * expandfactor has no effect, the problem persists
refactoring the binding expression to a code block with a return statement (sometimes that helps when single liners fail) has no effect, the problem persists
Here is an illustration of what's going on:
1 - the tree builds OK
2 - the tree is collapsed
3 - the tree is expanded again, the text flashes for a moment and disappears
4 - clicking arbitrary object causes all text to reappear
Any ideas what's going on? Yet another bug or am I missing something? Why would a slightly more complex expression cause the column with the text to disappear? It is not a problem of the changing scale in particular, since both expressions change it and both work on their own.
Note that the text is still there, just not being rendered by the scene-graph, that is evident from the size of the light-grey rounded rectangle which is sized to match the row width. The scale of the icon itself is evaluated and displayed property, but for some reason causes the text to disappear.
EDIT: Another curious observation, if the text column is replaced by a common rectangle, the bug does not manifest. If the column is wrapped inside a rectangle the same width as the column, but only as high as the small text, this causes only the large text to go missing:
This adds more weight to my suspicion that this is a bug in the scene-graph, and wrapping it in a rectangle forces the renderer to update only that portion of the missing text. Note that the rectangle is not clipping the column. Furthermore, if the rectangle color is set to #00000000, that is fully transparent, the text is missing again, the scene graph disregards it, and thus there is nothing to force the update of the text part. As expected, wrapping in an Item is no help either, nor is using text directly, without the column. If the rectangle is extended further down, it cuts through the big text, as a result, only the upper half of the big text is visible. Even the tiniest amount of transparency in the rectangle causes the text to go missing, even if the rectangle is 99.99% opaque. Only a 100% opaque rectangle forces the visibility of the text.
I have tested it with latest Qt 5.7 on windows 7 x64 (stock x86 qt build + custom x64 opengl static) and linux x64 (using the mesa drivers).
I'm wondering why for Item this works:
Item {
id: root
width: 640
height: 480
MouseArea {
anchors.fill: (root or parent. It doesn't matter)
onClicked: console.log("clicked")
}
}
But for Window it doesn't. Only anchoring by parent will work, but for anchoring by id it will fail.
According to the documentation, anchors.fill requires the argument either to be or to identify an Item-derived object.
From here you can follow the inheritance chain of Window and see that it is not actually an Item.
Moreover, from here you can see that:
If you assign an Item to the data list, it becomes a child of the Window's contentItem, so that it appears inside the window.
where for the contentItem we have that:
This attached property holds the invisible root item of the scene or null if the item is not in a window.
Because of that, it makes sense what you are observing:
the id of the Window does not identify an Item
→ anchoring by id results in an error
the parent is actually the hidden Item-derived contentItem to which each child of Window is automatically parented → anchoring by parent correctly works
I'm designing a spinner list control, which displays 3 items at a time.
Its working fine as required behaviour the only issue am facing is I need the central element appearance little bigger.
The approach which I can think as of now is to have an if condition in the delegate, which on the basis of current index increases the font size.
Is the above approach is possible? Any suggestions to achieve the particular behaviour
Below is the code snippet
SpinnerData {
id: spinner
focus: true
model: 20
delegate: Text { font.pixelSize: spinner.height/4.5; text: index; height: spinner.height }
}
I don't know the details of your component but here you can see implementation of the same control in Qt Quick Components.