zethon
8th December 2012, 14: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?
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?