Flat风格的Qml进度条

柔情只为你懂 2023-06-23 15:21 30阅读 0赞

> 基于Qml的ProgressBar控件修改而成。

![main\_page][main_page]

## 进度条代码 ##

import QtQuick 2.0
    import QtQuick.Controls 2.0
    
    ProgressBar { 
        id: root
    
        property color color: "#3498DB"
    
        value: 0.5
    
        background: Rectangle { 
            implicitWidth: 200
            implicitHeight: 12
            color: "#EBEDEF"
        }
    
        contentItem: Item { 
            implicitWidth: root.background.implicitWidth
            implicitHeight: root.background.implicitHeight
    
            Rectangle { 
                width: root.visualPosition * parent.width
                height: parent.height
                color: root.color
            }
        }
    }

## 进度条样式代码 ##

![main\_page2.png][main_page2.png]

GridLayout { 
        width: root.width
        rows: 3
        columns: 3
    
        Repeater { 
            model: ["#727CF5", "#0ACF97", "#F9375E",
                    "#FFBC00", "#2B99B9", "#5A6268",
                    "#EEF2F7", "#212730", "#3498DB"]
    
            ProgressBar { 
                color: modelData
                value: Math.random()
            }
        }
    }

*  更多精彩内容请关注公众号**Qt君**。

[main_page]: https://img-blog.csdnimg.cn/20191220004051777.png
[main_page2.png]: https://img-blog.csdnimg.cn/20191220004037202.png

发表评论取消回复

表情：

评论列表（有 0 条评论，30人围观）

还没有评论，来说两句吧...

相关阅读

相关进度条

[在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4...

我就是我/ 2024年04月17日 05:28/ 0 赞/ 147 阅读

相关 QML制作环形进度条，使用ConicalGradient锥形渐变

QML中没有直接提供环形进度条组件，但是我们可以自己实现，如用Canvas、Shape、QPainter等等。我参照涛哥的代码（[https://github.com/jare

你的名字/ 2023年07月17日 09:59/ 0 赞/ 74 阅读

相关 Flat风格的Qml范围滑块

> 基于Qml的RangeSlider控件修改而成。 ![demo.gif][] 范围滑块代码 import QtQuick 2.5 import Q

逃离我推掉我的手/ 2023年07月01日 12:00/ 0 赞/ 31 阅读

相关 Flat风格的Qml滚动选择条

> 基于Qml的Tumbler控件修改而成。 ![demo.gif][] 滚动选择条代码 import QtQuick 2.0 import QtQu

向右看齐/ 2023年06月28日 11:14/ 0 赞/ 34 阅读

相关 Flat风格的Qml轮选框

> 基于Qml的SpinBox控件修改而成。 ![demo.gif][] 轮选框代码 import QtQuick 2.0 import QtQuic

朴灿烈づ我的快乐病毒、/ 2023年06月26日 08:24/ 0 赞/ 128 阅读

相关 Flat风格的Qml进度条

> 基于Qml的ProgressBar控件修改而成。 ![main\_page][main_page] 进度条代码 import QtQuick 2.0

柔情只为你懂/ 2023年06月23日 15:21/ 0 赞/ 31 阅读

相关 Flat风格的Qml组合框

> 基于Qml的ComboBox控件修改而成。 ![demo.gif][] 组合框代码 import QtQuick 2.0 import QtQui

太过爱你忘了你带给我的痛/ 2023年06月20日 06:01/ 0 赞/ 26 阅读

相关 QML使用ShaderEffect绘制环形进度条

0.前言之前用 Qt Widgets 的 QOpenGLWidget 类配合着色器写了下环形进度条（[https://blog.csdn.net/gongjianbo1

谁借莪１个温暖的怀抱￠/ 2023年03月13日 06:24/ 0 赞/ 40 阅读

相关进度条

<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta

港控/mmm°/ 2022年12月25日 15:57/ 0 赞/ 344 阅读

相关进度条

进度条--基本样式 <div class="progress"> <div class="progress-bar" style="width:8

墨蓝/ 2022年10月02日 14:48/ 0 赞/ 389 阅读