PDA

View Full Version : QML Listview Highlight image problem



vikaspachdha
2nd November 2011, 10:14
Hi guys,

I am new to QML and i ran into this problem with ListView Element. To be precise i have used an image to highlight the current item. It works fin on my desktop but when i try to run it on embedded linux i see the top left of the highlight item is not painted well. I am using directFb and Qt 4.7.0.
Please find the code and screen shots below.

This is the issue when i press down key, see the painted image in red box

7065

This is the issue when i press up key, see the painted image in red box
7066


Here is the code

List.qml


import Qt 4.7

Item {
id: list_item
focus: true

ListModel {
id: myModel
ListElement { itemName: "Watch TV"; }
ListElement { itemName: "Watch Remote TV"; }
ListElement { itemName: "TV Guide"; }
ListElement { itemName: "My Recordings"; }
ListElement { itemName: "Home Media"; }
ListElement { itemName: "Internet Apps"; }
ListElement { itemName: "Settings"; }
ListElement { itemName: "Help"; }
}

Component {
id: myDelegate
Text {
id: nameText
width:parent.width
height:40
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: itemName
font.pointSize: 12
}

}

ListView {
id: view
anchors.fill: parent
model: myModel
delegate: myDelegate
highlight: Item { Image { y: 0; width:parent.width; height: 40 ; source: "spinner-select.png"; } }
}

Keys.onDownPressed: {
console.log("Down key pressed ")
view.incrementCurrentIndex();
}
Keys.onUpPressed: {
console.log("Up key pressed")
view.incrementCurrentIndex();
}
Keys.onUpPressed: {
console.log("Up key pressed")
view.decrementCurrentIndex()
}
}


main.qml


import Qt 4.7

Rectangle {
id: rectangle1
width: 600
height: 480
property color base_color: "lightblue"
gradient: Gradient {
GradientStop { position: 0.0; color: Qt.darker(base_color,1.5)}
GradientStop { position: 0.2; color: base_color }
GradientStop { position: 0.5; color: Qt.lighter(base_color,2) }
GradientStop { position: 0.8; color: base_color }
GradientStop { position: 1.0; color: Qt.darker(base_color,1.5) }
}

List{
id : main_list
width: parent.width/3
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.topMargin: 100
}

}



Please let know if you nail down the problem.