switchparent.qml

switchparent.qml:

import QtQuick 2.10
import QtQuick.Window 2.10
import QtQuick.Layouts 1.3

Window {
    id: window

    visible: true

    minimumWidth: 300
    minimumHeight: 300

    RowLayout {
        id: topLayout

        anchors.fill: parent
        anchors.margins: spacing

        Rectangle {
            id: leftRect

            Layout.fillWidth: true
            Layout.fillHeight: true

            objectName: "leftRect"
            color: "red"

            Rectangle {
                id: innerRect

                x: 10; y: 10
                width: (minimumWidth - 3*topLayout.spacing)/2 - 2*10
                height: width

                color: "blue"

                Text {
                    anchors.centerIn: parent

                    text: "%1\n%2, %3\n%4x%5".arg(innerRect.parent.objectName)
                                             .arg(parent.x).arg(parent.y)
                                             .arg(parent.width).arg(parent.height)
                    color: "white"
                }
            }
        }

        Rectangle {
            id: rightRect

            Layout.fillWidth: true
            Layout.fillHeight: true

            objectName: "rightRect"
            color: "green"
        }
    }

    contentItem.states: State {
        name: "switchToRight"

        ParentChange {
            target: innerRect
            parent: rightRect
            x: rightRect.width - innerRect.width - 10
            y: rightRect.height - innerRect.height - 10
        }

        PropertyChanges {
            target: innerRect
            color: "darkblue"
        }
    }

    contentItem.transitions: Transition {
        ParentAnimation {
            via: contentItem

            NumberAnimation {
                properties: "x, y"
                duration: 3000
            }

            ColorAnimation {
                duration: 3000
            }
        }
    }

    MouseArea {
        anchors.fill: parent

        onClicked: {
            if (contentItem.state === "") {
                contentItem.state = "switchToRight";
            } else {
                contentItem.state = "";
            }
        }
    }
}

ウィンドウをクリックすると青い Rectangle の parent を右側の Rectangle に変更し右下に配置する。もう一度クリックすると parent を元に戻している。ParentAnimation 内の 2 つのアニメーションは並列に動作する。ParentAnimation で via を指定しないと青い Rectangle が右側から左側に移動するときに右側の Rectangle の裏に隠れてしまう。これはアニメーション開始時に青い Rectangle の parent が左側の Rectangle に変わることと、左側の Rectangle の parent 設定が右側の Rectangle の parent 設定よりも先に行われているので左側の Rectangle が右側の Rectangle の下に描画されるためである。

Behavior

モジュール

QtQuick 2.0

クラス継承

QQuickBehavior → QtObject

プロパティー

animation: Animation = null default deferred
enabled: bool = true

シグナル

enabledChanged()

説明

プロパティーの説明

animation: Animation

enabled: bool

問題

Behavior のリファレンスに animation プロパティーが遅延プロパティーであることが書かれていない。

参考情報

Behavior QML Type

Transition

モジュール

QtQuick 2.0

クラス継承

QQuickTransition → QObject

プロパティー

animations: list<Animation> = [] readonly default deferred
enabled: bool = true
from: string = "*"
reversible: bool = false
running: bool = false readonly
to: string = "*"

シグナル

enabledChanged()
fromChanged()
reversibleChanged()
runningChanged()
toChanged()

説明

プロパティーの説明

animations: list<Animation>

enabled: bool

from: string

reversible: bool

running: bool

to: string

問題

Transition のリファレンスに animations プロパティーが遅延プロパティーであることが書かれていない。

参考情報

Transition QML Type

State

モジュール

QtQuick 2.0

クラス継承

QQuickState → QObject

プロパティー

changes: list<QQuickStateOperation> = [] readonly default deferred
extend: string = QString()
name: string = QString()
when: QQmlBinding* = nullptr

シグナル

completed()

説明

プロパティーの説明

changes: list<QQuickStateOperation>

カレントステートになったときに変更するプロパティーと実行スクリプトを指定する。QQuickStateOperation を継承しているのは以下のクラス。

QQuickParentChange
QQuickAnchorChanges
QQuickPropertyChanges
QQuickStateChangeScript

従って AnchorChanges と ParentChange、PropertyChanges、StateChangeScript を要素とするリストが設定できる。

extend: string

name: string

when: QQmlBinding*

シグナルの説明

completed()

問題

State のリファレンスの changes プロパティーは型表記が存在しないものになっている。また何を設定できるかが明確に記載されていない。遅延プロパティーであることも書かれていない。

参考情報

State QML Type

console

ログ

console.debug(...)
console.error(...)
console.info(...)
console.log(...) (console.debug() と同じ)
console.warn(...)
print(...) (console.debug() と同じ)

アサーション

console.assert(式, 説明文字列)

タイマー

console.time(識別文字列)
console.timeEnd(識別文字列)

トレース

console.trace()

カウント

console.count(説明文字列)

プロファイリング

console.profile()
console.profileEnd()

例外

console.exception(式...)

問題

Console API のリファレンスに print() が記載されていない。

参考情報

Console API