qml 进度条 斑马线

ProgressBar{
        id:progressbar
        x:296
        y:172
        width: 530
        height: 40
        minimumValue: 0
        maximumValue:1000
        value: 500
        style:ProgressBarStyle{
            id:progressStyle
            background: Row{
                //color: "red"
                Repeater{
                    model:19
                    Rectangle{
                        width: 28
                        height: 40
                        Rectangle{
                            width: 5
                            height: 40
                            color: "#F5F5F5"
                        }
                    }
                }
                Rectangle{
                    width: 5
                    height: 40
                    color: "#F5F5F5"
                }
            }
            progress:Row{
                //color: "red"
                Repeater{
                    model:19
                    Rectangle{
                        width: 28
                        height: 40
                        Rectangle{
                            width: 5
                            height: 40
                            color: "#0086D1"
                        }
                    }
                }
                Rectangle{
                    width: 5
                    height: 40
                    color: "#0086D1"
                }
            }
            panel: Item {
                width: 530
                height:40
                Loader{
                    anchors.fill: parent
                    sourceComponent: progressStyle.background
                }
                Loader{
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    //anchors.right: parent.right
                    width: progressStyle.currentProgress*(parent.width)
                    sourceComponent: progressStyle.progress
                }
            }
        }
    }

 

posted @ 2022-08-22 17:32  ccc_zdh  阅读(322)  评论(0)    收藏  举报