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
screen_shot_2_ed.png
This is the issue when i press up key, see the painted image in red box
screen_shot_3.png
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()
}
}
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()
}
}
To copy to clipboard, switch view to plain text mode
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
}
}
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
}
}
To copy to clipboard, switch view to plain text mode
Please let know if you nail down the problem.
Bookmarks