Qt Quick-QML控件类-闪灯控件(支持动画)创作过程

完美代码

于 2023-04-11 20:25:55 发布

阅读量902

点赞数

CC 4.0 BY-SA版权

文章标签： qt 开发语言动画

谢绝转载-https://update.blog.youkuaiyun.com

本文链接：https://blog.youkuaiyun.com/update7/article/details/130092619

QT 同时被 2 个专栏收录

187 篇文章 ¥299.90 ¥399.90

订阅专栏

QT.

182 篇文章 ¥299.90 ¥399.90

订阅专栏

本文介绍了如何使用Qt Quick-QML创建一个支持动画的闪灯控件。通过定义矩形和圆形状态以及利用Qt Quick动画组件在开和关状态间平滑过渡，实现闪烁效果。同时提供了BlinkingLight控件的使用示例，通过turnOn和turnOff函数控制灯的状态。

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

Qt Quick-QML控件类-闪灯控件(支持动画)创作过程

本篇文章将讲述如何使用Qt Quick-QML控件类创建一个闪灯控件，该控件支持闪烁动画。

首先，我们需要创建一个QML文件并命名为BlinkingLight.qml。在该文件中，我们将定义一个矩形区域和一个圆形区域，用于表示灯的开和关状态。我们还将引入Qt Quick的动画组件，以便在灯亮起和灭掉之间过渡。

下面是BlinkingLight.qml的代码：

import QtQuick 2.15
import QtQuick.Controls 2.15

Rectangle {
    id: container
    width: 70
    height: 70

    Rectangle {
        id: lightOn
        color: "yellow"
        radius: width/2
        anchors.centerIn: parent
        visible: false
    }

    Circle {
        id: lightOff
        color: "gray"
        radius: width/2 - 5
        anchors.centerIn: parent
        visible: true
    }

    states: [
        State {
            name: "on"
            PropertyChanges { target: lightOff; visible: false }
            PropertyChan

了解本专栏