QML 中的进度指示器

Question

我正在使用 QML 在 QT 中启动一个项目，我需要构建一个进度指示器来显示流程的步骤。我希望做类似该链接中的图像的操作：https://dribbble.com/shots/10261597-Progress-Indicator

我在文档中没有找到任何相关内容，实现这一目标的最佳方法是什么？

Answer 1

我必须在项目中实现类似的功能。我设计的步进器菜单包括在步骤更改时触发的动画。此外，步进器中的第一项使用 Canvas 组件，该组件根据当前步骤动态绘制其内容。

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: "Stepper Menu"


    Item {
        width:parent.width
        height:parent.height
        Rectangle {
            id: stepperMenu
            width: parent.width
            height: parent.height
            color:"transparent"
            property int currentStep: 1

            function updateGraphics(){
                innerCircle.requestPaint()
            }

            function goToNextStep() {
                if (currentStep < 5) {
                    currentStep++
                    updateGraphics()
                }
            }

            function goToPreviousStep() {
                if (currentStep > 1) {
                    currentStep--
                    updateGraphics()
                }
            }

            Row {
                anchors.centerIn: parent
                spacing: 5
                Rectangle {
                    id: item
                    radius: 50
                    width: 50
                    height: 50
                    color: stepperMenu.currentStep >= 2 ? "lightgreen" : "transparent"

                    Canvas {
                        id: innerCircle
                        anchors.centerIn: parent
                        width: item.width / 2
                        height: item.height / 2

                        onPaint: {
                            var ctx = getContext("2d");
                            ctx.clearRect(0, 0, width, height);
                            if (stepperMenu.currentStep < 2) {
                                ctx.fillStyle = "#3b90f3";
                                ctx.beginPath();
                                ctx.arc(width / 2, height / 2, width / 2, 0, Math.PI * 2, true);
                                ctx.fill();
                            } else {
                                ctx.strokeStyle = "#3b90f3";
                                ctx.lineWidth = 4;
                                ctx.beginPath();
                                ctx.moveTo(width * 0.2, height * 0.5);
                                ctx.lineTo(width * 0.4, height * 0.7);
                                ctx.lineTo(width * 0.8, height * 0.3);
                                ctx.stroke();
                            }
                        }
                    }

                    Rectangle {
                        radius: 50
                        anchors.fill: parent
                        color: "transparent"
                        border.width: 2
                        border.color: "grey"

                        Rectangle {
                            id: borderAnim
                            radius: 50
                            anchors.fill: parent
                            anchors.margins: -2
                            color: "transparent"
                            border.width: 2
                            border.color: stepperMenu.currentStep >= 1 ? "#3b90f3" : "transparent"
                            Behavior on border.color {
                                ColorAnimation { duration: 500 }
                            }
                        }
                    }
                }
                Rectangle {
                    id: spacer
                    radius: 5
                    width: 35
                    height: 5
                    color: "grey"
                    anchors.verticalCenter: parent.verticalCenter

                    Rectangle {
                        id: fillRect
                        width: stepperMenu.currentStep >= 2 ? spacer.width : 0
                        height: 5
                        color: "#3b90f3"
                        radius: 5
                        Behavior on width {
                            NumberAnimation { duration: 500 }
                        }
                    }
                }

                Rectangle {
                    id: item1
                    radius: 50
                    width: 50
                    height: 50
                    color: stepperMenu.currentStep >= 3 ? "lightgreen" : "transparent"
                    Text {
                        anchors.centerIn: parent
                        text: "Hello"
                    }

                    Rectangle {
                        radius: 50
                        anchors.fill: parent
                        color: "transparent"
                        border.width: 2
                        border.color: "grey"

                        Rectangle {
                            id: borderAnim1
                            radius: 50
                            anchors.fill: parent
                            anchors.margins: -2
                            color: "transparent"
                            border.width: 2
                            border.color: stepperMenu.currentStep >= 2 ? "#3b90f3" : "transparent"
                            Behavior on border.color {
                                ColorAnimation { duration: 500 }
                            }
                        }
                    }
                }

                Rectangle {
                    id: spacer2
                    radius: 5
                    width: 35
                    height: 5
                    color: "grey"
                    anchors.verticalCenter: parent.verticalCenter

                    Rectangle {
                        id: fillRect2
                        width: stepperMenu.currentStep >= 3 ? spacer2.width : 0
                        height: 5
                        color: "#3b90f3"
                        radius: 5
                        Behavior on width {
                            NumberAnimation { duration: 500 }
                        }
                    }
                }

                Rectangle {
                    id: item2
                    radius: 50
                    width: 50
                    height: 50
                    color: stepperMenu.currentStep >= 4 ? "lightgreen" : "transparent"
                    Text {
                        anchors.centerIn: parent
                        text: "!!!!"
                    }

                    Rectangle {
                        radius: 50
                        anchors.fill: parent
                        color: "transparent"
                        border.width: 2
                        border.color: "grey"

                        Rectangle {
                            id: borderAnim2
                            radius: 50
                            anchors.fill: parent
                            anchors.margins: -2
                            color: "transparent"
                            border.width: 2
                            border.color: stepperMenu.currentStep >= 3 ? "#3b90f3" : "transparent"
                            Behavior on border.color {
                                ColorAnimation { duration: 500 }
                            }
                        }
                    }
                }
                Rectangle {
                    id: spacer3
                    radius: 5
                    width: 35
                    height: 5
                    color: "grey"
                    anchors.verticalCenter: parent.verticalCenter

                    Rectangle {
                        id: fillRect3
                        radius: 5
                        width: stepperMenu.currentStep >= 4 ? spacer3.width : 0
                        height: 5
                        color: "#3b90f3"
                        Behavior on width {
                            NumberAnimation { duration: 500 }
                        }
                    }
                }
                Rectangle {
                    id: item3
                    radius: 50
                    width: 50
                    height: 50
                    color: stepperMenu.currentStep >= 5 ? "lightgreen" : "transparent"
                    Text {
                        anchors.centerIn: parent
                        text: "Hello"
                    }

                    Rectangle {
                        radius: 50
                        anchors.fill: parent
                        color: "transparent"
                        border.width: 2
                        border.color: "grey"

                        Rectangle {
                            id: borderAnim3
                            radius: 50
                            anchors.fill: parent
                            anchors.margins: -2
                            color: "transparent"
                            border.width: 2
                            border.color: stepperMenu.currentStep >= 4 ? "#3b90f3" : "transparent"
                            Behavior on border.color {
                                ColorAnimation { duration: 500 }
                            }
                        }
                    }
                }
            }
            Row {
                anchors.top: parent.top
                anchors.horizontalCenter: parent.horizontalCenter

                Button {
                    text: "Previous"
                    enabled: stepperMenu.currentStep > 1
                    onClicked: stepperMenu.goToPreviousStep()
                }

                Button {
                    text: "Next"
                    enabled: stepperMenu.currentStep < 4
                    onClicked: stepperMenu.goToNextStep()
                }
            }
        }
    }
}

示例