Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

[SOLVED]QML listview highlight problem



  • Hi,

    I have a problem with listview and highlight component. For now my highlight component is after the listview component, like in this picture:
    !http://i.imgur.com/yvfWy53.png(highlight after listview)!
    I want to do like this:
    !http://i.imgur.com/IUaMaW2.png(Good example)!

    My listview:

    @Rectangle {
    id: _scrollbar_area;
    width: 1100;
    height: 520;
    x: 50;
    clip:true;
    anchors.verticalCenter: parent.verticalCenter;
    color: "transparent"
    radius: 8;
    ListView {
    id: list;
    anchors.horizontalCenter: parent.horizontalCenter;
    anchors.verticalCenter: parent.verticalCenter;
    anchors.fill: parent;
    delegate: component;
    highlight: highlightBar;
    highlightFollowsCurrentItem: false;
    focus: true;
    model: 10;
    }
    }@

    Highlight component:

    @Component {
    id: highlightBar
    Rectangle {
    width: 1100; height: 60
    y: list.currentItem.y;
    radius: 8;
    opacity: 1;
    gradient: onn;
    Gradient {
    id:onn
    GradientStop { position: 0.0; color: "#01bd5e" }
    GradientStop { position: 1.0; color: "#006a10" }
    }
    Behavior on y { SpringAnimation { spring: 10; damping: 1 } }
    }
    }@

    listview component:

    @Component {
    id:component;
    Row {
    spacing: 15
    height: 77;
    width: parent.width;
    Rectangle {
    id: list_item;
    signal clicked();
    height: 57;
    width: parent.width;
    radius: 8;
    color: "#c2c2c2"

                Text {
                    id: rules;
                    y: 25;
                    anchors.left: parent.left;
                    anchors.leftMargin: 20;
                    anchors.verticalCenter: parent.verticalCenter;
                    text: "Text";
                    font.pixelSize: 20;
                    font.family: font_.name;
                    opacity: 1;
                }
    
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        list_item.clicked();
                        list.currentIndex = index;
                        list_item.color = "transparent";
                    }
                }
            }
        }
    }@
    

    I tried change the listview component color to transparent, but when i clicked another listview elements all clicked elements goes transparent, i want that listview elements goes back to "#c2c2c2" color. Sorry for my english ;))

    Thanks in advance ;)



  • You can check for isCurrentItem in your delegate, and make your background transparent. And apply the green gradient to your highlight item....

    @
    Rectangle {
    id: list_item;
    signal clicked();
    height: 57;
    width: parent.width;
    radius: 8;
    color: _scrollbar_area.isCurrentIem ? "transparent" : "#c2c2c2"
    }
    @



  • I tried with it, but when i clicked my listview item nothing happend... what i'm doing wrong, any more ideas ?



  • I solved it, mistake was in my delegate.

    Code:

    @Rectangle {
    id: _scrollbar_area;
    ...
    ListView {
    id: list;
    ...
    delegate: Item {
    id:component;
    height: 72;
    width: parent.width;
    Row {
    height: 77;
    width: parent.width;
    Rectangle {
    id: list_item;
    signal clicked();
    height: 57;
    width: parent.width;
    radius: 8;
    color : component.ListView.isCurrentItem ? "transparent" : "#c2c2c2"
    Text {
    ...
    }

                       MouseArea {
                           anchors.fill: parent
                           onClicked: {
                               list_item.clicked();
                               list.currentIndex = index;
                           }
                       }
                   }
               }
           }
           highlight: highlightBar;
           highlightFollowsCurrentItem: false;
           focus: true;
           model: 10;
        }
    }@

Log in to reply