Qt クイックサンプル - ポジショナー

QML Positioner のサンプル集です。

Positionersは、ポジショナーに関連する小さなQMLサンプル集です。それぞれの例は、特定のタイプや機能を強調した小さなQMLファイルです。詳しくは、「Qt Quick における重要な概念 - ポジショニング」を参照してください。

サンプルを実行する

Qt Creator からサンプルを実行するには、Welcome モードを開き、Examples からサンプルを選択します。詳細については、Building and Running an Example を参照してください。

トランジション

Transitionsは、ポジショナーでアイテムを表示したり隠したりするときに、アニメーションで遷移します。これは、様々なポジショナーのアイテムが配置されたシーンで構成されています：Column Row 、Grid 、Flow 。各ポジショナーには、トランジションとして記述されたアニメーションがあります。

move: Transition {
    NumberAnimation {
        properties: "x,y"
        easing.type: Easing.OutBounce
    }
}

移動トランジションは、ポジショナー内のアイテムが他のアイテムの出現や消失によって移動したときに、どのようにアニメーションするかを指定します。

add: Transition {
    NumberAnimation {
        properties: "x,y"
        easing.type: Easing.OutBounce
    }
}

追加トランジションは、アイテムがポジショナーに追加されたときにどのように表示されるかを指定します。

populate: Transition {
    NumberAnimation {
        properties: "x,y"
        from: 200
        duration: 100
        easing.type: Easing.OutBounce
    }
}

populate トランジションは、親ポジショナーが最初に作成されたときに、アイテムがどのように表示されるかを指定します。

付属プロパティ

Attached Propertiesは、Positioner の attached プロパティを使って、アイテムがポジショナー内のどこにあるかを決定する方法を示しています。

Rectangle {
    id: green
    color: "#80c342"
    width: 100 * page.ratio
    height: 100 * page.ratio

    Text {
      anchors.left: parent.right
      anchors.leftMargin: 20
      anchors.verticalCenter: parent.verticalCenter
      text: qsTr("Index: %1%2%3").arg(parent.Positioner.index)
                .arg(parent.Positioner.isFirstItem ? qsTr(" (First)") : "")
                .arg(parent.Positioner.isLastItem ? qsTr(" (Last)") : "")
    }

    // When mouse is clicked, display the values of the positioner
    MouseArea {
        anchors.fill: parent
        onClicked: column.showInfo(green.Positioner)
    }
}

プロジェクト例 @ code.qt.io

本ドキュメントに含まれる文書の著作権は、それぞれの所有者に帰属します。本書で提供されるドキュメントは、Free Software Foundation が発行したGNU Free Documentation License version 1.3に基づいてライセンスされています。 Qtおよびそれぞれのロゴは、フィンランドおよびその他の国におけるThe Qt Company Ltd.の商標です。その他すべての商標は、それぞれの所有者に帰属します。