获取 ProgressBar 以填充 Rectangle qml答案

【问题标题】：Get ProgressBar to fill Rectangle qml获取 ProgressBar 以填充 Rectangle qml
【发布时间】：2021-05-11 14:57:58
【问题描述】：

我有一个矩形，我希望在矩形周围有一个边框，并且 ProgressBar 适合这个矩形，同时仍然能够看到边框。

使用下面的 qmlonline 工具，我可以创建带有 ProgressBar 的 Rectangle，但 ProgressBar 覆盖了整个 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"
                    }
                }
            }
        }   
    }
}

我尝试修改 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的边框，但是上下可以看到。

【问题讨论】：

标签： qt qml progress-bar

【解决方案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"
                }
            }
        }
    }   
}
}

【讨论】：