请问进度条上方带有文字进度、并且跟随进度条移动的进度条该怎么实现？

Posted 2023-05-18

看了您的博客，深表感谢。特来向您咨询，还望赐教
1、点击刷新，进度条会重新加载
2、上方的文字跟随进度条的进度而移动，并且文字也跟随变化
还望不吝赐教

有很多这类的插件，网址不方便提供。比如下面的：

当然如果纯h5标签，比如

<input type="range"/>

或

<progress value="22" max="100"></progress>

参考技术A 这个用jquery或者js来实现设置进度条的长度，然后把进度条分为几个部分，每个部分用js或者jquery添加文字和进度条的颜色或者其他功能

QML 进度条不动

【中文标题】QML 进度条不动

【英文标题】：QML Progress Bar doesn't move

【发布时间】：2020-11-28 14:17:53

【问题描述】：

我正在使用 QT v5.12.6，在我的应用程序中，我计划在应用程序启动期间使用进度条大约 15 秒。在这 15 秒内操作如下：

QML 组件创建。 与服务器的连接。 其他启动操作将在后台运行。

一旦完成所有启动操作，我将隐藏我的启动屏幕，它只是一个矩形，其中包括带有进度条的加载文本。对于这 15 秒，我将增加进度条，但进度条在 10 秒内不会增加/移动。它看起来像是被吊死了，但如果我使用繁忙的指示器，它就会开始旋转。不幸的是，我不能使用繁忙的指示器组件，因为我需要一个进度条的外观和感觉。

我的应用程序在具有低端处理器和极低 RAM 速度的嵌入式平台上运行。我假设这个问题是由于 UI 上的负载，因为正在创建许多组件。

忙碌指示器和进度条之间有什么区别吗？还有关于如何在启动时处理 UI 负载的任何建议？

编辑 1： 添加了一个示例。我已经尽力模仿这个问题。在此示例中，busyindicator 和进度条都卡住了一段时间。但是在嵌入式设备中忙碌指示器工作但不知道如何。运行应用程序后请点击Click Me按钮。

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3

Window 

    property int pbValue:0
    visible: true
    width: 500
    height: 400
    title: qsTr("Hello World")

    Rectangle
        id: mySplashScreen
        anchors.fill: parent

        ProgressBar
            id: pBar
            height: 20
            width: parent.width
            anchors.bottom: parent.bottom
            from:0
            value : pbValue
            to:30
        

        BusyIndicator
            anchors.right: parent.right
            running: (pbValue < pBar.to +1)
        

        Button
            text: "click me"
            onClicked: 
                //Create component equivalent to my application which has "n"
                //number of components like buttons, combobox, chart view etc.
                //Here just creating the rectangle more number of times.
                for(var i = 0 ; i < 15000 ;i++) //HINT : Increase/decrease the value if problem is not seen
                
                    var comp = mycomp.createObject(mySplashScreen)
                
            
        
    

    Timer
        id:timer
        interval: 250
        running: (pbValue < pBar.to +1)
        onTriggered: 
            pbValue += 1;
        
    

    Component
        id:mycomp
        Rectangle
            width: 200
            height: 200
            color: "green"
        
    

【问题讨论】：

请提供minimal reproducible example

@eyllanesc 我添加了一个代码 sn-p。这几乎是我面临的相同问题。我不确定我的嵌入式设备上的繁忙指示器的工作情况。但是在 Windows 上，机器人会卡住，直到所有组件都加载完毕。

在您的示例中，您通过调用 createObject 15000 次来创建对象。您实际上在嵌入式设备上调用了什么？你在用Loader吗？

很少有基于加载器的，很少有像列表视图和表格视图这样的视图，还有一些是网格，它只包含在 JS 中创建自定义组件的直接创建组件调用。

【参考方案1】：

将您的对象创建代码以较小的间隔移动到单独的 Timer 中，而不是一次创建所有对象，而是每 25 MS 一次创建 50 个对象。

这将允许主事件循环在加载时处理其他事情，例如繁忙指示器的动画。

这是实现此功能的一种方法

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3

Window 

    property int pbValue: 0
    visible: true
    width: 500
    height: 400
    title: qsTr("Hello World")

    Rectangle 
        id: mySplashScreen
        anchors.fill: parent

        ProgressBar 
             // changed handling of progress bar
            id: pBar
            height: 20
            width: parent.width
            anchors.bottom: parent.bottom
            from: 0
            value: compList.length // bind this value 
            to: 15000
        

        BusyIndicator 
            anchors.right: parent.right
            running: (pbValue < pBar.to + 1)
        

        Button 
            text: "click me"
            onClicked: 

                timer.running = true
            
        
    

    property var compList: [] // created property to store all created components to track what has been done
    Timer 
        id: timer

        interval: 25
        running: false
        repeat: true
        onTriggered: 
            
            for (var i = 0; i < 50; i++) 
                var comp = mycomp.createObject(mySplashScreen) // moved component into timer
                compList.push(comp) // added component to huge list of components for tracking
            

            pbValue = compList.length
            if ((pbValue >= 15000)) 
                timer.running = false
                console.log("All components completed")
            
        
    

    Component 
        id: mycomp
        Rectangle 
            width: 200
            height: 200
            color: "green"
        
    

【讨论】：

我的应用程序已经有一个庞大的代码库，将尝试实现这个解决方案。在您的代码进度条value: pbValue 中需要进行一次小的编辑。

如果它有一个庞大的代码库，你应该使用加载器而不是创建组件实例——它们更快，同时工作更好