C

Qt Quick Ultralite studio_components 示例

演示如何使用 Qt Quick Ultralite Studio 组件。

概览

本示例展示了如何使用 Qt Quick Ultralite Studio 组件。

它使用 ArcItem QML 类型绘制圆形仪表，并在右侧提供控件来操作仪表的显示。如果在一段时间内没有用户交互，属性将自动更新。

目标平台

项目结构

主应用程序

主应用程序窗口定义在 studio_components.qml

ArcItem 页面

ArcItemPage.qml 由三部分组成，左侧是使用 ArcItem 的圆形仪表，右侧是改变仪表外观的控件，以及计时器来自动演示。

Gauge.qml 使用两个 ArcItem 实例来实现圆形仪表。第一个用于背景，其最小和最大角度（以度为单位）分别由 begin 和 end 属性定义。

ArcItem {
    id: bg
    anchors.centerIn: parent
    arcWidth: arc.arcWidth
    begin: root.beginAngle
    end: root.endAngle
    fillColor: "#707070"
    height: arc.width
    outlineArc: arc.outlineArc
    round: arc.round
    strokeWidth: 0
    strokeColor: Theme.backgroundArcStrokeColor
    width: root.width
}

第二个用于绘制仪表值的实际水平。它的 begin 属性与背景弧的角相同，但 end 属性随仪表值的变化而变化，范围为 0 到 100。区域通过 gradient 用渐变色填充。主颜色由右侧的颜色之一指定。仪表中的颜色逐渐变为较暗的颜色。

ArcItem {
    id: arc
    anchors.centerIn: parent
    arcWidth: 28
    begin: root.beginAngle
    end: root.valueAngle
    fillColor: "#00414a"
    height: arc.width
    outlineArc: true
    round: true
    strokeColor: Theme.foregroundArcStrokeColor
    strokeWidth: 2
    width: root.width

    gradient: LinearGradient {
        x1: 0
        y1: 20
        x2: 160
        y2: 140

        GradientStop {
            id: gradientStop1
            color: arc.fillColor
            position: 0.5
        }

        GradientStop {
            id: gradientStop2
            color: "#400006"
            position: 1
        }
    }
}

ArcItem 的 arcWidth、fillColor、outlineArc 和 round 属性被公开为 Gauge 组件的属性。右侧的 UI 控件允许您更改这些属性。

property alias arcWidth: arc.arcWidth
property alias fillColor: arc.fillColor
property alias fillDarkColor: gradientStop2.color
property alias outlineArc: arc.outlineArc
property alias round: arc.round

如果一段时间内没有用户活动，计时器会发出预定义信号以更改显示的 ArcItem 的属性。每当用户触摸控件时，计时器会重置。

局限性

由于图形驱动程序不支持自相交路径，弧形元素的描边颜色在 Infineon TRAVEO™ T2G 平台上设置为 "透明"。

文件

在特定 Qt 许可证下可用。
了解更多。