I have two repeaters, one is nested inside of the other.
There are two Rectangles;
Repeater {
model: x
Rectangle {
id: alwaysOnBottom
z: -1
..
}
Repeater {
z: 100
model: y
Rectangle {
id: alwaysOnTop
z: 100
}
}
}
I always want the second rectangle two be on top of the first one.
However, other items just does not respect their z value and, say second item's first rectangle overdraws the first item's second rectangle.
Related
I have a ListView (horizontal orientation) in my qml containing some fixed-size elements. I want items to be spaced out to fill the entiew width of ListView element. So if there are less elements I want them to be spaced out more. Basically what I need is exactly like Layout.fillWidth = true property of RowLayout but for ListView.
I can count how many items I have, then subtract total items width from ListView width, divide by items count and assign the spacing but it seems too silly to do.
Is there a way to do this automatically like in RowLayout?
Or maybe I need to use something different from ListView for this? Something like RowLayout but that I can assign my list data model to?
You can accomplish what you want with a ListView, you just need to adjust the spacing dynamically based on how many delegates you have. This example will break down if your delegates are differently-sized (as this is based only on the width of the first delegate), or if the delegates cumulatively exceed the width of the ListView.
ListView {
width: 500
orientation: Qt.Horizontal
model: 6
spacing: {
if (count > 0) {
return (width - (itemAtIndex(0).width * count))/(count - 1)
} else {
return 0
}
}
delegate: Rectangle {
implicitHeight: 50
implicitWidth: 50
color: "red"
border.width: 1
}
}
ListView may not be the most appropriate container for this task. I say this because it has a built in ScrollView and other behaviors that it sounds like you don't need. If all you need is a simple row of a few identically-sized delegates, I agree with scopchanov and believe that a Repeater inside a RowLayout would be the best option. Here is a simple example:
RowLayout {
width: 500
Repeater {
model: 6
delegate: Rectangle {
implicitHeight: 50
implicitWidth: 50
color: "tomato"
border.width: 1
Layout.alignment: Qt.AlignHCenter // must be set to align the rectangles within their empty space
}
}
}
You may notice that this introduces gaps to the left and right, if these gaps are unacceptable, you may need to set the spacing on the RowLayout in the same manner as the ListView example instead.
My ListView should always scroll its currently active item to the top between preferredHighlightBegin and preferredHighlightEnd. That works while clicking an item. However when a new item is added to my AbsctractListModel (And its not just added on the end but could be added anywhere in the middle), the ListView shows the new item, but it is not scrolled to the top. This is most likely because list.currentIndex = index is not set for new added items. I want to set it but did not find a way yet to do so. Does anyone have a hint?
I tried different signals such as onCurrentItemChanged but did not find the proper one yet which also gives me the correct index.
ListView {
id: list
anchors.fill: parent
clip: true
spacing: 11
focus: true
highlightMoveDuration: 400
snapMode: ListView.SnapToItem
preferredHighlightBegin: 0
preferredHighlightEnd: 100
highlightRangeMode: ListView.StrictlyEnforceRange
model: myAbstractListModel
delegate: ListItem {
height: 56
width: list.width
color: "red"
onListItemClicked: {
list.currentIndex = index
}
}
}
The expected result would be a ListView which scrolls a programmatically new added item of my AbstractListModel to the top (between preferredHighlightBegin and preferredHighlightEnd).
Adding this to your ListView will change the current index to the last one whenever the number of items in the model changes, you might want to keep track of the previous items count if you want to scroll only on insertion.
onCountChanged: {
if (count > 0) {
currentIndex = count - 1;
}
}
If the new items might be inserted anywhere in the model you could connect directly to it using the Connections item inside your ListView and connect it directly to the rowsInserted signal of QAbstractItemModel.
Connections {
target: model
onRowsInserted: {
currentIndex = first + 1;
}
}
If your model emits only the dataChanged signal you can try this.
Connections {
target: model
onDataChanged: {
currentIndex = topLeft.row() + 1;
}
}
I have a need for a simple drop-down box containing the numbers 1 through 25 inclusive.
If I set the model up as a simple 25, I get the values 0 through 24 inclusive. I know I can have a more complicated list model but it seems rather silly to construct a massive array of values when they should be able to be calculated on the fly.
From what I read, it should be a simple matter to create a delegate for setting the display values but, with the QML:
ComboBox {
width: 100
model: 25
delegate: ItemDelegate {
text: index + 1
}
}
the values in the drop-down selection area are correct but the value displayed on selection are still zero-based.
How do I get both the selection area and the value to be the values 1..25?
You can set the displayText: currentIndex + 1 for the combo box:
ComboBox {
width: 100
model: 25
delegate: ItemDelegate {
text: index + 1
}
displayText: currentIndex + 1
}
I have choose an item in combobox. Item's position is 300 for example. If I want to choose new element from combobox . Popup shows from beginning. I want to popup opened from current item position.
ComboBox {
id: control
model: ["First", "Second", "Third","MERHABA","NASILSIN","SELAM","IYIMISIN","DOSTUM","SUAN","BIR","DENEME YAPILIYOR"]
//width: 350
//font.pixelSize: 20
delegate: ItemDelegate {
width: 350
text: modelData
font.weight: control.currentIndex === index ? Font.DemiBold : Font.Normal
font.pixelSize: 30
highlighted: control.highlightedIndex == index
}
For QtQuick.Controls 2, There is a 'popup' property, so we can set the popup position with it's own property 'y', like this:
ComboBox {
model: ["First", "Second", "Third"]
delegate: ItemDelegate {
text: modelData
}
popup.y: y + height // popup just below ComboBox
}
The ComboBox will work the way you want it if the conditions allow for it, that is, if you have enough elements to fill the entire drop down list after the current index item it will show from that item rather than the beginning.
The stock ComboBox however doesn't seem to allow you to specify the drop down list height, so it will take significantly more elements than you have in your example. Or significantly taller elements.
Furthermore, if the current index is the last element, how do you imagine this will show? The list would show only the last element plus a whole bunch of nothing, which is not even possible, the last item cannot move up from the end of the list.
If you really want that behavior, you will have to implement your own combo box element from scratch.
I was facing the same issue and found out that if you place the popup onOpened, it works perfectly:
ComboBox {
id: yearDropdown
model: yearModel
onActivated: updateVisibleDate()
popup: Popup {
id: comboPopup
clip: true
contentItem: ListView {
id: listView
implicitHeight: contentHeight
model: yearDropdown.popup.visible ? yearDropdown.delegateModel : null
onModelChanged: if(model) positionViewAtIndex(yearDropdown.currentIndex, ListView.Center);
ScrollIndicator.vertical: ScrollIndicator { }
}
onOpened: {
x = yearDropdown.x //Set the position you want
y = yearDropdown.y + yearDropdown.implicitHeight //Set the position you want
}
}
}
I want to fill the colours in the following rectangles created through Repeaters, dynamically.
I am not able to access the bottom Repeater at all.
How should I access "all" the rectangles here?
Row
{
spacing: 20
Repeater
{
id: repeater3
property Repeater repeater2: repeater2
model: head.rows
Column
{
id: columnInBetween
spacing: 20
Repeater
{
id: repeater2
model: head.columns
property Row row1: row1
Row
{
id: row1
property Repeater repeater1: repeater1
Repeater
{
id: repeater1
model: 2
Rectangle
{
width: 20; height: 20
color: "red"
}
}
}
}
}
}
}
Repeater will expand Item they contians.So you can use .children[index] to access those Item expanded.
In your case:
/*0< index < head.rows
you get first Column expanded by repeater3*/
repeater3.itemAt(index).children[0]
/*0< index < head.columns
you get first Row of first Column expanded by repeater3 and repeater2*/
repeater3.itemAt(index).children[0].children[0]
/*0< index < 2
you get first Rectangle of first Row of first Column expanded by repeater3 and repeater2 and repeater1*/
repeater3.itemAt(index).children[0].children[0].children[0]
By the way, I do not know your intention and just remaid that you are getting a head.columns rows and 2 * head.rows columns of tables.