web-dev-qa-db-ja.com

すべての子を含むストレッチ要素

[〜＃〜] qml [〜＃〜] で、すべての子が要素に収まるように要素を自動的に拡大するにはどうすればよいですか？そして、間隔を指定する方法は？たとえば、テキストの周りに長方形を作成したいとします。長方形には、ある程度の内部間隔が必要です。

次のように書くと、長方形のサイズは0,0になります。

Rectangle {
    color: "gray"
    anchors.centerIn: parent;

    Text {
        text: "Hello"
    }
}

QMLアイテムをコンテンツに合わせて拡大する方法で提案されているように、Column要素を使用して修正しようとすると、次にウィンドウ/親全体に列が表示されます。

Column {
    anchors.centerIn: parent

    Rectangle {
        color: "gray"
        anchors.fill: parent
    }

    Text {
        anchors.centerIn: parent
        text: "Hello"
    }
}

編集：

また、Flowの代わりにColumn要素を使用しようとしましたが、ウィンドウ/親全体に行が表示されました。

qtqml
23
Juraj Blaho

これには childrenRect プロパティを使用できます。

import QtQuick 1.1

Rectangle {
    width: 320
    height: 200

    Rectangle {
        color: "BurlyWood"
        anchors.centerIn: parent
        width: childrenRect.width + 20
        height: childrenRect.height + 20

        Text {
            id: hello
            x: 10
            y: 10
            text: "Hello"
        }

        Text {
            anchors.left: hello.right
            anchors.leftMargin: 10
            anchors.top: hello.top
            text: "World"
        }
    }
}

ただし、直接の子の1つでchildrenRectをanchors.centerIn: parentと組み合わせて使用​​すると、バインディングループに関する警告が表示されることに注意してください。

40
Thorbjørn Lindeijer

widthとheightの設定は手動で機能しますが、少し見苦しいです。

Rectangle {
    color: "gray"
    width: label.width+20
    height: label.height+20
    anchors.centerIn: parent

    Text {
        id: label
        anchors.centerIn: parent
        text: "Hello"
    }
}
7
Juraj Blaho