Qml控件之Spin加载中

最新推荐文章于 2025-04-17 19:00:00 发布

Qt君

最新推荐文章于 2025-04-17 19:00:00 发布

阅读量678

点赞数

分类专栏：自定义Qml控件文章标签： Qml控件

署名-非商业性使用-相同方式共享 4.0 国际

本文链接：https://blog.youkuaiyun.com/nicai_xiaoqinxi/article/details/111940540

版权

自定义Qml控件专栏收录该内容

15 篇文章 ¥59.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了Qml中的Spin控件，用于展示加载中的状态。文章通过演示、例子和使用场景说明了该控件如何在页面或区块加载时缓解用户焦虑，提升用户体验。 Spin控件利用四个Rectangle和NumberAnimation创建圆形动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Spin(加载中)控件是基于Qml实现的，它兼容于QtQuick 1.x和QtQuick 2.x。可用于页面和区块的加载中状态。

1. 演示

2. 例子

import QtQuick 2.0 // Qt4 版本改为：import QtQuick 1.0

Rectangle {
    id: root
    width: 320
    height: 240

    Grid {
        anchors.centerIn: parent
        rows: 2
        columns: 2
        spacing: 80

        Spin { } // defualt
        Spin { color: "#a9cf6c" }
        Spin { color: "#fde498" }
        Spin { color: "#4169E1" }
    }
}

3. 使用场景

页面等待异步数据或正在渲染过程时，合适的加载动画会有效缓解用户的焦虑，从而提升用户体验。

4. 实现

四个Rectangle构造圆形并使用了动画类(NumberAnimation)。

5. 源码获取

可在公众号聊天界面回复"入群"后在群文件获取源码。

/*
 * Author: Qt君
 * WebSite: qthub.com
 * Email: 2088201923@qq.com
 * QQ交流群: 732271126
 * 关注微信公众号: [Qt君] 第一时间获取最新推送.
 * 代码仅用于学习使用，请勿用于商业途径.
 */
import QtQuick 2.0 // Qt4 版本改为：import QtQuick 1.0

FocusScope {
    id: root
    property color color: "#2f9bff"
    width: 40
    height: width

    Grid {
        id: grid
        anchors.centerIn: parent
        rows: 2
        columns: 2
        spacing: root.width * 0.2
        
        Repeater {
            model: [
                Qt.darker(color, 1.0),
                Qt.darker(color, 0.95),
                Qt.darker(color, 0.90),
                Qt.darker(color, 0.85),
                ]
            Rectangle {
                width: root.width * 0.3
                height: width
                color: modelData
                radius: width/2
            }
        }
    }
    
    Item {
        anchors.top: parent.bottom
        anchors.topMargin: 10
        width: root.width
        height: root.height * 0.3
        Text {
            anchors.centerIn: parent
            text: "loading..."
            font.pixelSize: 15
        }   
    }

    NumberAnimation {
        target: grid
        running: true
        property: "rotation"
        loops: Animation.Infinite
        from: 0
        to: 360
        duration: 1000
    }
}