[Solved] ListView highlight item over delegate
-
Is it possible to make highlight item of list view to be over delegate instead of under?
I`m trying to have delegate items with white background, but when you scroll out to display some background for the list view. Problem is if I put delegates with background highlight item is not visible!
-
I don't understand what exactly you want. You want to use delegate to show items in a QListView and to highlight the selected item?
I don't understand what means "over delegate" and "under delegate".
-
I want to use delegate like this:
@delegate: Rectangle
{
....
}
@Rectangle has default white color (that is what I want), but if I use it as a base of delegate item, highlight will not be visible. And I want it to be visible with items that have background.
As I saw in this "post":http://stackoverflow.com/questions/11299677/listview-highlight-item-isnt-shown this is not possible? -
Try to place a Rectangle below the ListView as a background and make that white. Then have the item delegate rectangle have a transparent background.
@Rectangle{
id: background
height: 200
width: 200
color: "white"ListView{ id: listView anchors.fill: parent model: listModel delegate: listDelegate highlight: listHighlight focus: true } Component{ id: listDelegate Rectangle{ width: listView.width height: 40 color: "transparent" Text{ anchors.fill: parent verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft anchors.leftMargin: 12 text: name } } } Component{ id: listHighlight Rectangle{ color: "lightblue" } } ListModel{ id: listModel ListElement{ name: "One" } ListElement{ name: "Two" } ListElement{ name: "Three" } } }@But if you want the ListView to have a different background (i.e. image or something) and the selectedItem should have a white background then you can make use of the isCurrentItem property of the listView.
@Component{
id: listDelegate
Rectangle{
width: listView.width
height: 40
color: ListView.isCurrentItem ? "white" : "transparent"Text{ anchors.fill: parent verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft anchors.leftMargin: 12 text: name } } }@But then you can remove the highlight component.
Will that fix your problem?
-
I would like the second variant you mentioned. I want to have something like this: http://imgur.com/02WVUsK
But I need highlight item, so the solution with on current item having white background is not acceptable. -
I`ll try to be as clear as possible. On the picture I posted is a ListView when it is scrolled out of bounds. The striped background needs to show when you scroll out, and when you click on an item it needs to be highlighted.
I cannot use transparent items because then the background of the items will be striped. Currently I`m using white rectangle as delegate base and I have everything as on the picture except highlight.
-
Ok:
-
Background of ListView is striped image. Instead of the Rectangle in my code, just use an Image instead.
-
For the items to all be white use this in the delegate:
@Component{
id: listDelegate
Rectangle{
width: listView.width
height: 40
color: ListView.isCurrentItem ? "#f0f0f0" : "white"Text{ anchors.fill: parent verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignLeft anchors.leftMargin: 12 text: name } } }@This makes all items except the ListView.isCurrentItem with a white background color. But the hightlighted item will have 0xf0f0f0 as an highlight color.
Is that what you are after?
-
