Resize Scale bar on zoom in and zoom out

sush123

I have a scale bar displayed in the ARCGIS map with QML and i need to resize this scale bar when ever i zoom in and zoom out.

Created a new qml as ScaleBar.qml

import QtQuick 2.2
import Esri.ArcGISRuntime 100.1

Item {
id: scaleBar

property MapView map: null

signal clicked()
signal doubleClicked()

implicitWidth: 100
implicitHeight: 50

width: 100
height: 50

Component.onCompleted: {
    if (!map && parent && parent.objectType && parent.objectType === "MapView") {
        map = parent;
    }
}

QtObject {
    id: internal

    property real segmentWidth: scaleBar.width / 4
    property real segmentHeight: scaleBar.width * 0.05
}

Column {
    width: parent.width
    spacing: 0

    Text {
        id: scaleText

        width: parent.width
        text: "1:" + Math.round(map.mapScale).toLocaleString()
        horizontalAlignment: Text.AlignHCenter
        elide: Text.ElideRight
        font {
            pointSize: 10
            bold: true
        }
    }

    Item {
        width: parent.width
        height: internal.segmentHeight * 2

        Column {
            id: segmentsColumn

            anchors.fill: parent

            Repeater {
                model: 2

                Row {
                    id: segmentRow

                    property int rowIndex: index

                    Repeater {
                        model: 4

                        Rectangle {
                            width: internal.segmentWidth
                            height: internal.segmentHeight

                            color: (index + segmentRow.rowIndex) & 1 ? "white" : "black"
                        }
                    }
                }
            }
        }

        Rectangle {
            anchors {
                fill: segmentsColumn
            }

            color: "transparent"
            border {
                color: "black"
            }
        }
    }

    Row {
        width: parent.width

        Repeater {
            model: 3

            Text {
                text: "d" + index
                width: parent.width / 2

                horizontalAlignment: Text.AlignLeft
                font {
                    pointSize: 10
                    bold: true
                }
            }
        }
    }

    Text {
        width: parent.width
        text: qsTr("units")
        horizontalAlignment: Text.AlignHCenter
        elide: Text.ElideRight
        font {
            pointSize: 10
            bold: true
        }
    }
}


MouseArea {
    anchors.fill: parent

    onClicked: {
        scaleBar.clicked();
    }

    onDoubleClicked: {
        scaleBar.doubleClicked();
    }
}

}

This is how i am setting scalebar in Mapview

    ScaleBar{                
        anchors.left: mapView.left
        anchors.bottom: mapView.bottom
        anchors.bottomMargin: 80
        anchors.margins: 10 * scaleFactor
        map:mapView
           }

How can i resize scalebar just like it works in googlemaps.