web-dev-qa-db-ja.com

スタイリングする各プロパティを手動でマークせずにQMLをスタイリングする

QMLはウィジェットのようにCSSスタイリングをサポートしていないことを知っており、スタイリング/テーマ設定の代替アプローチについて読んだことがあります。

これらのアプローチに共通するのは、開発者が「スタイリングQMLファイル/シングルトン」のプロパティにバインドするか、ローダーを使用して別のQMLコンポーネントをロードすることにより、スタイリングできるQMLの部分を指定する必要があることです。スタイル名について。私が欲しいのは、CSSの「クラス」セレクターではなく「id」セレクターのように機能するものです。これにより、個々のQMLファイルは後でスタイルが設定されるかどうかを知る必要がなくなります。

私の現在のアプローチでは、すべてのQMLファイルが次のようになります（リンク2のアプローチを使用）。

Main.qml

Rectangle {
    Id: background
    color: g_theme.background.color 
    //g_theme is defined in root context and loaded dynamically
}

私がしたいのは：

Main.qml

Rectangle {
    Id: background
    color: “green” // default color
}

そして、定義する（または同様の）スタイリングファイルを用意します

Main.qml #background.color: red

これは現時点で可能ですか、それとも将来のQtバージョンのパイプラインにあるものですか、それともスタイリングの好ましい方法は上記のリンクで説明されているアプローチと同様のものであり続けますか？

cssqtqmlstyling
18
jesperhh

推奨される方法は、デフォルトコンポーネントにスタイルを適用するのではなく、これらのコンポーネントから派生して、事前にスタイル設定されたカスタムコンポーネントを作成することです。

私のプロジェクトのために私がしていること：

まず、JavaScript共有モジュールとして1つの集中型「テーマ」ファイルを作成します。

// MyTheme.js
.pragma library;
var bgColor   = "steelblue";
var fgColor   = "darkred";
var lineSize  = 2;
var roundness = 6;

次に、それに依存するカスタムコンポーネントを作成します。

// MyRoundedRect.qml
import QtQuick 2.0;
import "MyTheme.js" as Theme;
Rectangle {
    color: Theme.bgColor;
    border {
        width: Theme.lineSize;
        color: Theme.fgColor;
    }
    radius: Theme.roundness;
}

次に、事前にスタイル設定されたコンポーネントを1行のコードでどこでも使用できます。

MyRoundedRect { }

そして、この方法には大きな利点があります。それは、単純なスキニングではなく、実際にはオブジェクト指向です。

必要に応じて、テキスト、画像、影などのネストされたオブジェクトをカスタムコンポーネントに追加したり、マウスホバーでの色の変更などのUIロジックを追加したりすることもできます。

PS：ええ、JSモジュールの代わりにQMLシングルトンを使用できますが、追加のqmldirファイルが必要であり、制限される可能性があるQt5.2からのみサポートされます。そして明らかに、コンテキストプロパティ内のC++ QObjectも機能します（たとえば、ディスク上のファイルからスキンプロパティをロードする場合...）。

14
TheBootroo

Qt Quick Controls Styles を確認することも役立ちます。

コントロールスタイルを使用する場合、ターゲットコントロールの各プロパティを明示的に割り当てる必要はありません。すべてのプロパティは、個別の[ControlName]Styleコンポーネント（例：ButtonStyle）で定義できます。
次に、ターゲットコンポーネント（例：Button）で、1行のコードでスタイルコンポーネントを参照できます。

ここでの唯一の欠点は、スタイルコンポーネントがQtクイックコントロールでのみ使用できることです。 Qtコンポーネントには使用できません。

0
Alexander Stepaniuk