Qml simple ListView

ButtonsListView.qml

/*!
  * https://vk.com/topic-33978_29405724?post=2868
  */
import QtQuick 2.4
import QtQuick.Controls 1.3

ScrollView {
    width: 400
    height: 80

    ListView {
        model: 10
        spacing: 10
        orientation: Qt.Horizontal

        delegate: Rectangle {
            id: delegateItem

            property ListView view: ListView.view

            anchors.verticalCenter: parent.verticalCenter
            width: ListView.isCurrentItem ? 60 : 40
            height: width
            color: mouseArea.containsMouse ? "blue" : index % 2 ? "green" : "red"

            MouseArea {
                id: mouseArea

                anchors.fill: parent
                hoverEnabled: true
                onClicked: delegateItem.view.currentIndex = index
            }

            Behavior on width {
                NumberAnimation { duration: 200 }
            }
        }
    }
}