UIファイル

Qt Quick UI Prototype プロジェクトを作成したり、Qt Creator とQt Design Studio を切り替えたりする場合、プロジェクトに UI ファイル (.ui.qml) が含まれることがあります。これらのファイルは、Qt Quick Designer またはQt Design Studio でのみ編集してください。

デフォルトでは、Qt Creator は UI ファイルをDesign モードで開きます。UI ファイルをQt Design Studio で開くには、Open With のコンテキスト・メニューから > を選択します。 Qt Design StudioFile System Projects を選択します。

.ui.qml ファイルでは、以下の機能はサポートされていません：

• JavaScript ブロック
• 純粋式以外のバ イ ンデ ィ ン グ
• シグナルハンドラ
• ルートコンポーネント以外のコンポーネントの状態
• QQuickItem から派生していないルート・コンポーネント。Item
• ルートコンポーネントの親の参照

以下のコンポーネントはサポートされていません：

• 振る舞い
• バインディング
• キャンバス
• シェーダー効果
• タイマー
• トランスフォーム

サポートされているメソッド

Qt Creator では、QML エンジンでサポートされているほとんどの JavaScript 関数と、Qt QML のメソッドのサブセットをサポートしています。

このセクションでは、.ui.qml ファイルで使用できる関数の一覧を示します。

JavaScript 関数

経験則として、純粋な関数がサポートされています。これらの関数は、そのスコープ内にあるパラメータにのみ依存し、その状態を変更します。したがって、同じパラメータが与えられた場合、常に同じ結果を返します。こ れに よ り 、.ui.qml フ ァ イ ルを破壊す る こ と な く 、 プ ロ パテ ィ バ イ ンデ ィ ン グの変換や再フォーマ ッ ト化が可能にな り ます。

以下の JavaScript 関数がサポー ト さ れてい ます：

• charAt()
• charCodeAt()
• concat()
• endsWith()
• includes()
• indexOf()
• isFinite()
• isNaN()
• lastIndexOf()
• substring()
• toExponential()
• toFixed()
• toLocaleLowerCase()
• toLocaleString
• toLocaleUpperCase()
• toLowerCase()
• toPrecision()
• toString()
• toUpperCase()
• valueOf()

ま た、Math オブジェ ク ト とDate オブジェ ク ト のすべての関数がサポー ト さ れてい ます。

詳細については、「JavaScript オブジェクトと関数の一覧」を参照してください。

Qt QML のメソッド

Qt Creator では、カラーメソッド、特定のデータ型のオブジェクトを作成するためのヘルパーメソッド、トランスレーションメソッドがサポートされています。

以下のカラーメソッドがサポートされています：

• Qt.darker()
• Qt.hsla()
• Qt.hsva()
• Qt.lighter()
• Qt.rgba()
• Qt.tint()

以下のヘルパー・メソッドをサポートしています：

• Qt.formatDate()
• Qt.formatDateTime()
• Qt.formatTime()
• Qt.matrix4x4()
• Qt.point()
• Qt.quaternion()
• Qt.rect()
• Qt.size()
• Qt.vector2d()
• Qt.vector3d()
• Qt.vector4d()

以下の翻訳メソッドがサポートされています：

• qsTr()
• qsTranslate()
• QT_TRANSLATE_NOOP()
• qsTrId()
• QT_TRID_NOOP()
• QT_TR_NOOP()

メソッドの使い方については、Qt QML Methods を参照してください。

UIファイルの使用

UI ファイルはDesign モードで編集してください。コンポーネントをコードで使用するには、それらをプロパティとしてエクスポートします：

Item {
    width: 640
    height: 480

    property alias button: button

    Button {
        anchors.centerIn: parent
        id: button
        text: qsTr("Press Me")
    }
}

プロパティのエイリアスは、フォームを使用するコードにボタンをエクスポートします。Navigator の (Export) ボタンを使って、コンポーネントをプロパティとしてエクスポートすることができます：

コンポーネントが使用されるUIファイルでは、button プロパティエイリアスを使用して、例えばシグナルハンドラを実装することができます。以下のコード・スニペットでは、UIファイルはMainForm.ui.qml と呼ばれています：

MainForm {
    anchors.fill: parent
    button.onClicked: messageDialog.show(qsTr("Button pressed"))
}

プロパティを割り当てたり、動作やトランジションを定義することもできます。

2D またはNavigator のビューから.qml ファイル内のコンポーネントの実装に直接移動するには、コンポーネントを右クリックし、コンテキストメニューからGo to Implementation を選択します。