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.
Related
I'm using a Loader in a ListView delegate to increase the performance when loading expensive delegate models.
My code looks like this:
delegate: Component {
Loader {
asynchronous: true
sourceComponent: MyDelegateComponent {}
}
}
The model comes from C++ (QAbstractListModel implementation).
The problem is that the filling order of the list is wrong. It comes from bottom to top, creating a strange view for the user, who needs to wait to see the first list element.
Is it possible to change this filling order to load top element first? The model in the C++ data is well ordered.
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.
I have a Qml file with one 'Rectangle' and an 'Image'. I want to load either one based on the property set in my.cpp file.
Please help me to find a best way to do this.
Actually I could think two possible ways to do the same:
1) First approach is to have both the element (the image and rectangle), defined in the respective QML, and to control their visibility from my.cpp file. I can have a property, this property can control the visibility of either of the two. Drawback in this approach is that even though only one element has to be displayed, two will be created.
2) Second approach is that we can have two components and load either one using "Loader" depending on the property set from the my.cpp.
Ex:
'
Component
{
id:img
Image
{
id: myImage
source:currentdir + "/img_production/Separator/myImage.png"
width: 10
height: 79
}
}
Component
{
id:rect
Rectangle
{
id:re
height: 82
width: 10
color: "#FFFFFF"
}
}
Loader
{
id: itemDisplay
sourceComponent: style.flag? rect : img
anchors.fill: parent.fill
}
'
Looking for some expert suggestions.
PS: style.flag is property set by my.cpp to Qml.
In this case, where both items are simple base types, I would go for the visibility change.
Having both elements instantiated directly makes it easier to refer to them in bindings or bind to their properties.
It also means their allocation only happens once, reducing the chance of memory fragmentation
If you are worried about the image consuming too much memory while the rectangle is shown you could still make the image`s source property depend in the visiblity value, i.e. unload the image when not showing the Image element.
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:
I have two ListViews in a QML project that are both running off of the same model. I am trying to get them to start out at different indices (the model starts with 2 ListElements in it). In order to do this, I call positionViewAtIndex when the component completes:
ListView {
model: mymodel
Component.onCompleted: positionViewAtIndex(1,ListView.Beginning)
//...
}
However, neither ListView actually is positioned at the desired index. Is there something I'm not doing? The only solution that I have seen for this problem is to ensure that you're not calling the method before the ListView completes, but I am doing that.
I am using Qt 5.2/QtQuick 2.0.
Edit: After playing around with the other positioner functions, I have found that none of them work. I have also found that changing currentIndex does not work either. Furthermore, I have found that currentIndex is not being changed with the view -- onCurrentIndexChanged is never being fired.
So, I figured it out. It turns out that a ListView instantiates its delegates before it worries about its own properties...so the delegate was only reading off of the ListView's width before the ListView set its own dimensions. When a delegate has a width/height property in the orientation of the view equal to zero, the view will not know where to scroll to when positionViewAtIndex() is called. So, in order to fix this, you have to use a conditional binding:
Component {
id: myDelegate
Item {
width: ListView.view.width == 0 ? 480 /*or some preset*/ : ListView.view.width
}
}
This will give the delegate a nonzero width and cause the positionViewAtIndex() function to work.
Of course, if your ListView is vertical, then you need to set the height property and not the width property.
Alternatively you can set currentIndex to 1