[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.



  • Ok, try to explain more in detail what you want to happen when you have the highlight on an item. I am not sure what you are after.



  • 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:

    1. Background of ListView is striped image. Instead of the Rectangle in my code, just use an Image instead.

    2. 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?



  • Yesssss. Thank you very much. I never tried to think of highlight in that way, to change color of rectangle when it is current item.

    Kudos to Gennon :)



  • You are welcome! QML is often simpler than you think.

    Remember mark your title as [Solved] for others to see.

    Happy coding!


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.