PDA

View Full Version : QML, ListView and Frustration



zethon
8th December 2012, 15:53
I have a C++ QWidget project in which I'd like to use QML for a couple of lists I have in the application. However, I find that doing something as simple as highlighting an item that is clicked on is proving to be difficult. I can't wait to see what a frustration this is will be when I go to add a scroll bar to my list. Anyway, I'm sure it's just because I'm new to QML but still, it's infuriating.

I have a QML file with some sample model data that looks like:


import QtQuick 1.0

Item
{
width: 300
height: 200

ListModel
{
id: myModel2

ListElement { text: "List Item 1" }
ListElement { text: "List Item 2" }
ListElement { text: "List Item 3" }
ListElement { text: "List Item 4" }
ListElement { text: "List Item 5" }
ListElement { text: "List Item 6" }
}

Component
{
id: beerDelegate

Rectangle
{
id: beerDelegateRectangle
height: beerDelegateText.height * 1.5
width: parent.width

Text
{
id: beerDelegateText
text: "<b>" + modelData + "</b> <i>(" + modelData + ")</i>"
}

MouseArea
{
anchors.fill: parent
onClicked:
{
console.log("clicked: " + modelData + " at index: " + index);
beerList.currentIndex = index;
}
}
}
}

ListView
{
id: beerList
anchors.fill: parent
model: myModel2
delegate: beerDelegate

highlightFollowsCurrentItem: true
highlight: Rectangle
{
width: parent.width
color: "red"
}

focus: true
}
}

This is adapted from a couple examples I found online. All I'm trying to do with now is get an item to be highlighted in red when I click on it. I thought that by defining the "highlight" property in my ListView (beerlist) and handling "onClicked" it should do it but.. ugh...

This is incredibly frustration and makes little sense to me right now. Help, please?

wysota
8th December 2012, 17:09
It seems to me your delegate overdraws the highlight. Change the delegate's item from "Rectangle" to "Item".

zethon
8th December 2012, 18:45
Thank you.

In general, is QML a viable option for good ol' fashion desktop applications? For example, my main goal with this question was to create a list box similar to a buddy list, with images and rich text. Is this something that would be better done in QML? Or perhaps with something like QListWidget?

Thanks again.

anda_skoa
8th December 2012, 22:25
Really depends on the context.
QtQuick has the advantage that is allows you to have all kinds of animations, e.g. when the list's content changes.

Of course it requires a different skill set, so you'll have to put quite some time into learning it properly.
If you are already good at using Qt's C++ API you might get further faster using a QListWidget or a QListView with a custom item delegate.

Cheers,
_

raunvivek
5th November 2015, 10:20
This solution might be helpful to other developers.

Change the code as per below:

import QtQuick 1.0

Item
{
width: 300
height: 200

ListModel
{
id: myModel2

ListElement { text: "List Item 1" }
ListElement { text: "List Item 2" }
ListElement { text: "List Item 3" }
ListElement { text: "List Item 4" }
ListElement { text: "List Item 5" }
ListElement { text: "List Item 6" }
}

Component
{
id: beerDelegate

Rectangle
{
id: beerDelegateRectangle
height: beerDelegateText.height * 1.5
width: parent.width

Text
{
id: beerDelegateText
text: "<b>" + modelData + "</b> <i>(" + modelData + ")</i>"
}

MouseArea
{
anchors.fill: parent
onClicked:
{
console.log("clicked: " + modelData + " at index: " + index);
beerList.currentIndex = index;
beerList.highlight = highlightBar; // Load this as a seperate component onclick of mouse
}
}
}
}

ListView
{
id: beerList
anchors.fill: parent
model: myModel2
delegate: beerDelegate

//highlightFollowsCurrentItem: true
//highlight: Rectangle
//{
// width: parent.width
// color: "red"
//}

focus: true
}

// Component to control ListView highlight property
Component {
id: highlightBar
Rectangle {
//width: 200; height: 50
color: "lightgrey"
// y: listView.currentItem.y;
// Behavior on y { SpringAnimation { spring: 2; damping: 0.1 } }
}
}
}

anda_skoa
5th November 2015, 17:12
This solution might be helpful to other developers.

wysota already explained the solution, simply not painting over the highlight.

If you really feel the need to resurrect a 3 year old thread just to post some code that is mostly commented out, it would be nice if it would at least be done with proper code tags.

Even more ideally maybe not post half backed work arounds into threads that have a proper solution already.

Someone might find this thread, not read the comments and conclude the code you posted is the way to go instead of using the trivial solution provided in the very first comment.

Cheers,
_