[QML] アンカーレイアウト

記事ディレクトリ

- - 1. アンカー
  - 2. いくつかの例

Qt Quick にはレイアウト管理に関連するクラスライブラリが 2 セットあります。1 つは項目ポジショナー (ロケーター)、もう 1 つは項目レイアウト (レイアウト) です。

ロケーター: Row (行ロケーター)、Column (列ロケーター)、Grid (グリッドロケーター)、Flow (フローロケーター)
レイアウト: RowLayout (行レイアウト)、ColumnLayout (列レイアウト)、GridLayout (グリッドレイアウト)、そして 1 つがこの記事の主役である Anchors (アンカーレイアウト) です。

今日はアンカーレイアウトについてのみ説明しますが、アンカーレイアウトを理解する前に、アンカーレイアウトがどのような部分で構成されているかを見てみましょう。

1. アンカー

アンカーは、要素と他の要素の間の関係、つまりアンカーレイアウトを指定することによって、インターフェイス内の要素の位置を決定する方法を提供します。

各項目には、左 (left)、水平中央 (horizontalCenter)、上 (top)、下 (bottom)、右 (right)、垂直中央 (verticalCenter)、ベースラインの 7 つの目に見えない補助線があると想像できます。以下に示すように:
アンカー構造

上にないベースラインはテキストが置かれている点線に対応し、テキストのないアイテムの場合は上と同じです。

アンカーレイアウトを使用する場合、アンカーラインの位置合わせに加えて、上 (topMargin)、下 (bottomMargin)、左 (leftMargin)、および右 (rightMargin) の余白を指定することもできます。以下に示すように:

パディング
次の例では leftMargin を指定します。

Rectangle {
	id: rect1
	color: "blue"
	//TODO...
}

Rectangle {
	id: rect2
	color: "red"
	//指定左边距
	anchors.left: rect1.rigth
	anchors.leftMargin: 5
	//TODO...
}

この場合、図に示すように、rect2 の左側に 5 ピクセルが予約されます。

また、手間を省いて手間を省きたい場合は、margin 属性を使用して 4 辺の空白を同じに設定することもできます。

アンカーレイアウトはQt Quickの最も柔軟なレイアウト方法であり、インターフェース上に表示される要素を自由に配置できますが、インターフェース要素が多い場合、最もコード量の多いレイアウト方法になります。。

2. いくつかの例

ウィンドウの左側に間隔のない 2 つの長方形:

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 600
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "blue"
        anchors.left: parent.left
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.left: rect1.right
    }
}

上の 2 つの長方形は近すぎるため、ある程度のスペースを残す必要があります。これは、anchors.leftMargin の空白スペースを指定することで実現できます。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 600
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "blue"
        anchors.left: parent.left
        anchors.leftMargin: 20
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.left: rect1.right
        anchors.leftMargin: 60
    }
}

1 つの長方形を水平方向に、もう 1 つを垂直方向に中央に配置します。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 600
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        width: 100
        height: 100
        color: "blue"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
        anchors.topMargin: 40
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 40
    }
}

centerln はアイテムの中央にアイテムを配置することを意味し、fill はアイテムを埋めることを意味します。

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.4

Window {
    visible: true
    width: 600
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect1
        color: "blue"
        anchors.fill: parent
    }

    Rectangle {
        id: rect2
        width: 100
        height: 100
        color: "red"
        anchors.centerIn: parent
    }
}

アンカーレイアウトは特定の状況では非常に便利ですが、欠点もあります。つまり、コードシステムが比較的複雑で、特にコントロールが多い状況では、コードの量が非常に冗長になります。
最初にこれだけ言っておきますが、不完全な点がある場合は、追加してください...

記事ディレクトリ

1. アンカー

2. いくつかの例

おすすめ