获取ProgressBar填充Rectangle qml

Question

我有一个矩形，我希望矩形周围有一个边框，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的边框，但你可以在顶部和底部看到它。

Answer 1

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

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

获取ProgressBar填充Rectangle qml

Get ProgressBar to fill Rectangle qml

qt

qml

progress-bar