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
Qt Code: 
  1. import Qt 4.7
  2.  
  3. Item {
  4.     id: list_item
  5.     focus: true
  6.  
  7.     ListModel {
  8.         id: myModel
  9.         ListElement { itemName: "Watch TV";   }
  10.         ListElement { itemName: "Watch Remote TV";  }
  11.         ListElement { itemName: "TV Guide";  }
  12.         ListElement { itemName: "My Recordings";  }
  13.         ListElement { itemName: "Home Media";  }
  14.         ListElement { itemName: "Internet Apps";  }
  15.         ListElement { itemName: "Settings";  }
  16.         ListElement { itemName: "Help";  }
  17.     }
  18.  
  19.     Component {
  20.         id: myDelegate
  21.             Text {
  22.                 id: nameText
  23.                 width:parent.width
  24.                 height:40
  25.                 horizontalAlignment: Text.AlignHCenter
  26.                 verticalAlignment: Text.AlignVCenter
  27.                 text: itemName
  28.                 font.pointSize: 12
  29.             }
  30.  
  31.     }
  32.  
  33.     ListView {
  34.         id: view
  35.         anchors.fill: parent
  36.         model: myModel
  37.         delegate: myDelegate
  38.         highlight: Item { Image { y: 0; width:parent.width; height: 40 ; source: "spinner-select.png"; } }
  39.     }
  40.  
  41.     Keys.onDownPressed: {
  42.         console.log("Down key pressed ")
  43.         view.incrementCurrentIndex();
  44.     }
  45.     Keys.onUpPressed: {
  46.         console.log("Up key pressed")
  47.         view.incrementCurrentIndex();   
  48.     }                                   
  49.     Keys.onUpPressed: {                 
  50.         console.log("Up key pressed")
  51.         view.decrementCurrentIndex() 
  52.     }                                
  53. }
To copy to clipboard, switch view to plain text mode 

main.qml
Qt Code: 
  1. import Qt 4.7
  2.  
  3. Rectangle {
  4.    id: rectangle1
  5.    width: 600
  6.    height: 480
  7.    property color base_color: "lightblue"
  8.    gradient: Gradient {
  9.        GradientStop { position: 0.0; color: Qt.darker(base_color,1.5)}
  10.        GradientStop { position: 0.2; color: base_color }
  11.        GradientStop { position: 0.5; color: Qt.lighter(base_color,2) }
  12.        GradientStop { position: 0.8; color: base_color }
  13.        GradientStop { position: 1.0; color: Qt.darker(base_color,1.5) }
  14.    }
  15.  
  16.    List{
  17.        id : main_list
  18.        width: parent.width/3
  19.        anchors.horizontalCenter: parent.horizontalCenter
  20.        anchors.top: parent.top
  21.        anchors.bottom: parent.bottom
  22.        anchors.topMargin: 100
  23.    }
  24.  
  25. }
To copy to clipboard, switch view to plain text mode 


Please let know if you nail down the problem.