[SOLVED]QML listview highlight problem

gedixss

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 ;)

stevenceuppens

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"
}
@

gedixss

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

gedixss

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;
    }
}@