web-dev-qa-db-ja.com

幅、高さとimplicitWidth / Heightの違い、およびQMLの対応するユースケース

違いは何ですか width/heightおよびimplicitWidth/Height QMLで?通常のサイズではなく暗黙のディメンションを設定する必要があるのはいつですか?コンポーネント/アイテムからレギュラーの代わりに暗黙の寸法を尋ねるべきなのはいつですか?

32
Silex

一般的に、implicitHeight/Widthの使用は、再利用可能なコンポーネント内でのみ意味があります。

このサイズを強制せずに、アイテムの自然なサイズのヒントを提供します。

例としてImageを取り上げましょう。画像の自然なサイズは、画像ファイルの1ピクセルを画面上の1ピクセルにマッピングします。ただし、サイズを拡張できるため、サイズは強制されず、オーバーライドできます。

今、私たちは未知の次元の写真を備えたギャラリーを持ちたいと考えており、成長したくはなく、必要に応じて縮小するだけです。そのため、画像の自然なサイズを保存する必要があります。つまり、暗黙の高さが作用する場所です。

Image {
    width: Math.max(150, implicitWidth)
    height: Math.max(150, implicitHeight)
}

カスタムコンポーネントでは、サイズの定義方法を選択できます。

1つの選択肢は、コンポーネントroot- nodeに関連するすべてのディメンションを、次のように持つことです。

Item {
    id: root
    Rectangle {
        width: root.width * 0.2
        height: root.height * 0.2
        color: 'red'
    }
    Rectangle {
        x: 0.2 * root.width
        y: 0.2 * root.height
        width: root.width * 0.8
        height: root.height * 0.8
        color: 'green'
    }
}

この場合、オブジェクトの自然なサイズはありません。コンポーネントに設定したサイズごとにすべてが完璧に機能します。

一方、自然なサイズのオブジェクトがある場合があります。 絶対値が含まれている場合

Item {
    id: root
    property alias model: repeater.model
    Repeater {
        id: repeater
        delegate: Rectangle {
            width: 100
            height: 100
            x: 102 * index
            y: 102 * index
        }
    }
}

この例では、コンテンツがアイテムを生産しない自然なサイズに関する情報をユーザーに提供する必要があります。ユーザーは、より小さいサイズを設定して突起を処理することを決定する場合があります。それを切り取って、しかし彼は彼の決定をするために自然なサイズに関する情報を必要とします。

多くの場合、childrenRect.height/widthimplcitHeight/Widthの適切な尺度ですが、例がありますが、これは良い考えではありません。 -例アイテムのコンテンツにx: -500がある場合。

実際の例としては、Flickableがあります。これは、そのサイズよりも大きなオブジェクトを含むように特別に設計されています。 Flickableのサイズをコンテンツと等しくするのは自然ではありません。

ChildrenRectはスケーリングを認識しないため、カスタムコンポーネントでscaleを使用する場合も注意してください。

Item {
    id: root
    implicitWidth: child.width * child.scale
    implicitHeight: child.height * child.scale
    Rectangle {
        id: child
        width: 100
        height: 100
        scale: 3
        color: 'red'
    }
}

あなたのコメント:コンポーネントのルート寸法の幅/高さを設定するのではなく、暗黙の幅/高さを設定する方が良い理由がわかりません。

implicitWidht/Heightは必要なものではありません-QtQuickはそれらなしでも実行できます。それらは便宜上存在し、慣例になります。


経験則

再利用可能なコンポーネントのルートノードのディメンションを設定する場合は、implicitWidth/Heightを設定します。
ノードがプロパティとして公開されている場合、場合によっては、非ルートノードに設定してください。
理由がある場合にのみ行ってください(多くの公式コンポーネントには何も付属していません)。
コンポーネントを使用するときは、width/heightを設定します。

15
derM

私には決定的な答えはありませんが、私が見つけたものをあなたに伝えることができます。最初に、 ドキュメントから

implicitWidth:実数

幅または高さが指定されていない場合、アイテムの自然な幅または高さを定義します。

ほとんどのアイテムのデフォルトの暗黙的なサイズは0x0ですが、一部のアイテムには、ImageTextなど、オーバーライドできない固有の暗黙的なサイズがあります。

しかし、 幅の情報が少ない

アイテムの位置とサイズを定義します。

widthheightは、シーン内のアイテムの実際のサイズを反映しています。暗黙のサイズは、アイテム自体に固有のプロパティです。1

私はそれらを次のように使用します:新しいアイテムを作成し、サイズを変更できる場合、オブジェクトの内部サイズinsideを設定します2。オブジェクトを使用しているときは、外部から実際のサイズを明示的に設定することがよくあります

オブジェクトの暗黙的なサイズは、高さと幅を設定することでオーバーライドできます。

例:TextWithBackground.qml

Item {
    implicitWidth: text.implicitWidth
    implicitHeight: text.implicitHeight
    // the rectangle will expand to the real size of the item
    Rectangle { anchors.fill: parent; color: "yellow" }
    Text { id: text; text: "Lorem ipsum dolor..." }
}

例:MyWindow.qml

Item {
    width: 400
    height: 300
    TextWithBackground {
         // half of the scene, but never smaller than its implicitWidth
         width: Math.max(parent.width / 2, implicitWidth)
         // the height of the element is equal to implicitHeight
         // because height is not explicitly set
    }
}

1)Textなどの一部の要素では、暗黙の高さは(暗黙ではない)幅に依存します。
2)暗黙的なサイズは、通常、その子の暗黙的なサイズに依存します。

6
Georg Schölly