QML公式シリーズチュートリアル——UseCase-Positioners and Layouts In QML

添付サイト:http://qt-project.org/doc/qt-5/qtquick-usecase-layouts.html
UseCase-Positioners and Layouts In QML-QMLの位置とレイアウト
QMLは、コンポーネントの位置を調整する方法をいくつか提供します.
以下は簡単な紹介にすぎません.詳細については、Important Concepts In Quick-Positioningを参照してください.
手動位置決め
コンポーネントのxを設定すると、yプロパティは親オブジェクトの左上隅を中心として特定の座標(x,y)に配置できます.visual coordinate systemでは、関連するルールについて説明します.
これらの属性に定数ではなく適切なバインドを使用することで,x,yの値を設定することで相対レイアウトを容易に実現できる.

<span style="font-size:14px;">import QtQuick 2.0

Item {
    width: 100; height: 100

    Rectangle {
        // Manually positioned at 20,20
        x: 20
        y: 20
        width: 80
        height: 80
        color: "red"
    }
}</span>

·
 
Anchors-アンカー
Itemタイプは、他のItemオブジェクトに自身を結び付ける機能を提供します.各Itemには6本のアンカー線、left、right、vertical center、top、bottom and horizontal centerがあります.垂直方向の3本のアンカー線は、水平方向と同様に、他のオブジェクトの任意の3本の垂直アンカー線に結ぶことができます.
詳細については、Positioning with Anchorsおよびanchors propertyドキュメントを参照してください.

import QtQuick 2.0

Item {
    width: 200; height: 200

    Rectangle {
        // Anchored to 20px off the top right corner of the parent
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: 20 // Sets all margins at once

        width: 80
        height: 80
        color: "orange"
    }

    Rectangle {
        // Anchored to 20px off the top center corner of the parent.
        // Notice the different group property syntax for 'anchors' compared to
        // the previous Rectangle. Both are valid.
        anchors { horizontalCenter: parent.horizontalCenter; top: parent.top; topMargin: 20 }

        width: 80
        height: 80
        color: "green"
    }
}

·
 

Positioners and Layouts-ロケータとレイアウト
多くの場合、コンポーネントのセットをある法則で位置決めすることを望んでいます.Qt Quickはいくつかのロケータタイプを提供しています.ロケータに配置されたコンポーネントは、何らかの方法で自動的にレイアウトされます.たとえば、Rowロケータタイプでは、内部のコンポーネントが水平にレイアウトされます.
詳細については、Item Positionersおよびthe positioner typesのドキュメントを参照してください.

import QtQuick 2.0

Item {
    width: 300; height: 100

    Row { // The "Row" type lays out its child items in a horizontal line
        spacing: 20 // Places 20px of space between items

        Rectangle { width: 80; height: 80; color: "red" }
        Rectangle { width: 80; height: 80; color: "green" }
        Rectangle { width: 80; height: 80; color: "blue" }
    }
}

·
 
位置決めと寸法のリアルタイム調整が必要な場合は、Qt Quick Layoutsを使用します.