C

Qt Quick Ultralite studio_components の例

Qt Quick Ultralite Studio Components の使用方法を示します。

概要

この例題では、Qt Quick Ultralite Studio Components の使い方を説明します。

この例では、ArcItem QML タイプを使用して円形のゲージを描画し、ゲージの外観を操作するためのコントロールを右側に提供しています。一定時間ユーザーの操作がない場合、プロパティは自動的に更新されます。

対象プラットフォーム

プロジェクト構成

メインアプリケーション

メインアプリケーションウィンドウはstudio_components.qml

ArcItemページ

ArcItemPage.qml は3つの部分からなり、左側にはArcItem を使った円形ゲージ、右側にはゲージの外観を変更するためのコントロール、そして自動的にデモンストレーションを行うためのタイマーがある。

Gauge.qml では、2つの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
}

もう1つは、ゲージの値の実際のレベルを描画します。その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 の公開されたプロパティを変更するために定義済みのシグナルを発します。ユーザーがコントロールに触れるたびに、タイマーはリセットされます。

制限事項

qmlprojectexporter を使用してアプリケーションをエクスポートする場合は、--selectorコマンドライン引数を使用して、これらのプラットフォーム用にエクスポートするときに"transparent" ファイルセレクタを適用します：

qmlprojectexporter --selector transparent examples/studio_components/mcu_studio_components.qmlproject

ファイル：

特定の Qt ライセンスの下で利用可能です。
詳細を確認してください。