Get ProgressBar to fill Rectangle qml

Question

I have a rectangle where I want to have a border around the Rectangle and the ProgressBar fit inside this rectangle while still being able to see the border.

Using qmlonline tool below I am able to create the Rectangle with ProgressBar, but the ProgressBar covers the whole Rectangle

    import QtQuick 2.7
    import QtQuick.Controls 2.3

    Item {
        width: 500
        height: 250

        Rectangle {
            color: "black"
            anchors.fill: parent
        
            Rectangle {
                id: rect1
                width: 250
                height: 50
                border.width: 1
                border.color: "white"
                color: "transparent"
            
                ProgressBar {
                    id: pBar
                    value: 0.5
                    background: Rectangle {
                    width: rect1.width
                    height: rect1.height
                    color: "gray"
                }
                contentItem: Item {
                    Rectangle {
                        width: pBar.visualPosition * rect1.width
                        height: rect1.height
                        color: "green"
                    }
                }
            }
        }   
    }
}

I've tried modifying the background: and contentItem: components to get this to happen, but it doesn't work quite right.

Below is my attempt

    import QtQuick 2.7
    import QtQuick.Controls 2.3

    Item {
        width: 500
        height: 250

        Rectangle {
            color: "black"
            anchors.fill: parent
        
        Rectangle {
            id: rect1
            width: 250
            height: 50
            border.width: 1
            border.color: "white"
            color: "transparent"
            
            ProgressBar {
                id: pBar
                value: 1
                background: Rectangle {
                    width: rect1.width
                    height: rect1.height * 0.925
                    anchors.verticalCenter: parent.verticalCenter
                    color: "gray"
                    }
                    contentItem: Item {
                    implicitWidth: rect1.width
                    implicitHeight: rect1.height
                    Rectangle {
                        width: pBar.visualPosition * rect1.width
                        height: rect1.height * 0.925
                        anchors.verticalCenter: parent.verticalCenter
                        color: "green"
                    }
                }
            }
        }
    }
}

When the progress is at 100% you can see that on the left and right side you cannot see rect1's border, but you can see it on the top and bottom.

user_7342293 · Answer

use anchor instead of "width and height"

import QtQuick 2.7
import QtQuick.Controls 2.3

Item {
    width: 500
    height: 250

    Rectangle {
        color: "black"
        anchors.fill: parent
    
        Rectangle {
            id: rect1
            width: 250
            height: 50
            border.width: 1
            border.color: "white"
            color: "transparent"
        
            ProgressBar {
                id: pBar
                value: 0.9
                anchors.fill: parent
                anchors.margins:1
                background: Rectangle {
        anchors.fill:parent
                color: "gray"
            }
            contentItem: Item {
                Rectangle {
                    width: pBar.visualPosition * parent.width
                    height: parent.height
                    color: "green"
                }
            }
        }
    }   
}
}

Get ProgressBar to fill Rectangle qml

1 Answers