Home > other >  How to create a Progress Bar in Qml with slant lines?
How to create a Progress Bar in Qml with slant lines?

Time:08-31

enter image description here

Hello ,

I am looking for some solution to create a progress bar in qml having slant lines.

I dont having any snippet to share here, as I am not aware how to do so.

Can anyone please guide ??

CodePudding user response:

The progressbar-with-slantlines

The slant lines are drawn using SVG graphics. The code is provided as-is and some degree of effort may be required to generalize the approach.

        ProgressBar {
            width: 200
            height: 32
            value: 0.25
            contentItem: Rectangle {
                border.color: "black"
                clip: true
                Repeater {
                    model: Math.floor(parent.width / 4)   16
                    Image {
                        x: index * 4 - 32
                        y: 0
                        source: `data:image/svg xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path fill="none" stroke="black" d="M 32 0 L 0 32" />
</svg>`
                    }
                }
                Rectangle {
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    width: parent.width * (1 - parent.parent.value)
                    border.color: "black"
                    color: "white"
                }
            }
        }

The sorts of things to generalize the above are:

  1. Make the solution work for any width and height
  2. Move the inline SVG to an external SVG file
  3. Make the colors configurable
  • Related