ユニバーサル・スタイル

ユニバーサルスタイルは、Microsoftユニバーサルデザインガイドラインに基づいています。詳細...

付属プロパティ

• アクセント: 色
• 背景: 色
• 前景色: 色
• テーマ: 列挙

付属メソッド

• 色color(enumeration predefined)

詳細説明

ユニバーサル スタイルは、Microsoft ユニバーサル デザイン ガイドラインに基づく、デバイスに依存しないスタイルです。ユニバーサルスタイルは、携帯電話やタブレットからPCまで、すべてのデバイスで見栄えが良くなるように設計されています。

Universalスタイルでアプリケーションを実行するには、「Qt Quick Controlsでスタイルを使用する」を参照してください。

カスタマイズ

ユニバーサル・スタイルでは、テーマ、アクセント、前景、背景の4つの属性をカスタマイズできます。

いずれの属性も任意のウィンドウまたはアイテムに対して指定でき、fonts と同じ方法で自動的に子ウィンドウに伝搬します。次の例では、ウィンドウと3つのラジオボタンはすべて、紫色のアクセントカラーを使用した暗いテーマで表示されます：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Universal 2.12

ApplicationWindow {
    visible: true

    Universal.theme: Universal.Dark
    Universal.accent: Universal.Violet

    Column {
        anchors.centerIn: parent

        RadioButton { text: qsTr("Small") }
        RadioButton { text: qsTr("Medium");  checked: true }
        RadioButton { text: qsTr("Large") }
    }
}

QMLで属性を指定するだけでなく、環境変数や設定ファイルで指定することも可能です。QMLで指定された属性は、他のすべての方法よりも優先されます。

設定ファイル

設定ファイルの詳細については、「Qt Quick Controls 設定ファイル」を参照してください。

環境変数

サポートされている環境変数の完全なリストについては、「Qt Quick Controlsでサポートされている環境変数」を参照してください。

依存関係

Universalスタイルに固有の属性にアクセスするには、Universalスタイルを別途インポートする必要があります。Universalスタイルへの参照に関係なく、同じアプリケーションコードが他のどのスタイルでも実行されることに注意する必要があります。Universal固有の属性は、アプリケーションがUniversalスタイルで実行される場合にのみ効果を発揮します。

常に読み込まれる QML ファイルに Universal スタイルがインポートされている場合、アプリケーションをどのスタイルで実行してもアプリケーションを実行できるようにするには、Universal スタイルをアプリケーションと一緒に配置する必要があります。ファイル セレクタを使用することで、スタイルへのハードな依存関係を作成することなく、スタイル固有の微調整を適用できます。

定義済みのユニバーサルカラー

利用可能な事前定義済みカラー

基本スタイル,素材スタイルもご覧ください。

付属プロパティ文書

この付属プロパティは、テーマのアクセントカラーを保持する。このプロパティは、任意のウィンドウまたはアイテムにアタッチすることができる。値は子に伝搬される。

デフォルト値はUniversal.Cobalt です。

次の例では、ハイライトされたボタンのアクセント・カラーがUniversal.Orange に変更されています：

Button {
    text: qsTr("Button")
    highlighted: true
    Universal.accent: Universal.Orange
}

この添付プロパティは、テーマの背景色を保持します。このプロパティは、任意のウィンドウまたはアイテムにアタッチできます。値は子に伝搬される。

デフォルト値はテーマ固有（ライトまたはダーク）です。

次の例では、ペインの背景色をUniversal.Steel に変更しています：

Pane {
    Universal.background: Universal.Steel

    Button {
        text: qsTr("Button")
    }
}

この添付プロパティは、テーマの前景色を保持します。このプロパティは、任意のウィンドウまたはアイテムにアタッチすることができる。値は子に伝搬される。

デフォルト値は、テーマ固有（ライトまたはダーク）です。

次の例では、ボタンの前景色をUniversal.Pink に設定しています：

Button {
    text: qsTr("Button")
    Universal.foreground: Universal.Pink
}

この付属プロパティは、テーマが明るいか暗いかを保持する。このプロパティは、任意のウィンドウまたはアイテムにアタッチすることができる。値は子に伝搬される。

利用可能なテーマ

themeをSystem に設定すると、システム・テーマの色に基づいてライト・テーマかダーク・テーマのいずれかが選択される。しかし、themeプロパティの値を読み取るとき、その値は決してSystem 、実際のテーマではありません。

次の例では、ペインとボタンの両方のテーマがUniversal.Dark に設定されています：

Pane {
    Universal.theme: Universal.Dark

    Button {
        text: qsTr("Button")
    }
}

付属メソッド・ドキュメント

この付属メソッドは、指定された事前定義されたユニバーサルカラーの有効なカラー値を返します。

Rectangle {
    color: Universal.color(Universal.Red)
}

関連情報

• Qtクイックコントロールのスタイリング