Qt 获取ProgressBar以填充矩形qml

我有一个矩形，我想在这个矩形周围有一个边框，而ProgressBar可以放在这个矩形内，同时还能看到边框

使用下面的qmlonline工具，我可以用ProgressBar创建矩形，但是ProgressBar覆盖了整个矩形

    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"
                    }
                }
            }
        }   
    }
}

我尝试过修改background:和contentItem:组件来实现这一点，但效果并不理想

下面是我的尝试

    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"
                    }
                }
            }
        }
    }
}

当进度为100%时，您可以看到在左侧和右侧看不到rect1的边框，但可以在顶部和底部看到它。

使用锚定，而不是“宽度和高度”

---

这真的很有效。

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"
                }
            }
        }
    }   
}
}