qml放大缩小，进度条

import QtQuick2.7

import QtQuick.Controls 1.4

Item {

    id: zoomId

    width: 200

    height: 50

    property int m_count: 7

    property int m_currentIndex: 5

    property var m_currentScaleVal: 1.0

    property int m_width: 12

    property int m_height: 20

    onM_currentIndexChanged: {

        m_currentScaleVal = repeaterid.model[m_currentIndex];

    }

    Row{

        anchors.verticalCenter: parent.verticalCenter

        anchors.right: parent.right

        anchors.rightMargin: 10

        spacing: 10

        Item {

            width: m_height

            height: m_height

            Rectangle{width: m_height;height: 5;color: Color.zoomBarLightColor;anchors.centerIn: parent}

            MouseArea {

                anchors.fill: parent

                onClicked: {

                    if (m_currentIndex > 0) {

                        m_currentIndex--

                    }

                }

            }

        }

        Repeater {

            id: repeaterid

            model: [0.5,0.6,0.7,0.8,0.9,1.0,2.0,3.0,4.0,5.0]

            delegate: Rectangle {

                width: index == m_currentIndex ? m_width : m_width-3

                height: index == m_currentIndex ? m_height : m_height-3

                color: index == m_currentIndex ? Color.zoomBarLightColor : "#B2AFA9"

                radius: 2

            }

        }

        Item {

            width: m_height

            height: m_height

            Rectangle{width: 5;height: m_height;color: Color.zoomBarLightColor;anchors.centerIn: parent }

            Rectangle{width: m_height;height: 5;color: Color.zoomBarLightColor;anchors.centerIn: parent }

            MouseArea {

                anchors.fill: parent

                onClicked: {

                    if (m_currentIndex < 9) {

                        m_currentIndex++

                    }

                }

            }

        }

    }

}

使用如下：

Rectangle{width: 600; height: 500;color: "#3A3223";

    MouseArea{
        anchors.fill: parent
 onWheel: {//滚轮
     var diff = (wheel.angleDelta.y)/120;
   if(diff){ zoomitemid.m_currentIndex+=diff;}
 }
Rectangle{
    x:50
    y:50
id: iddragitem; width: 100; height: 100;
scale: zoomitemid.m_currentScaleVal
}
    }

    Zoom{//放大缩小
            id: zoomitemid
            width: parent.width
            height: 50
            anchors.right: parent.right
        }
}