11

主にアプリのロゴ (小さな画像) とアプリのタイトル (テキストのみ) を含むアプリケーションのトップバーを作成しようとしています。さらに、このトップバーをウィンドウの高さに応じて自動的にサイズ変更したいと考えています。

私は QML を初めて使用しますが、これらのコンポーネントをRowまたはコンポーネント内にラップする必要があると思いRowLayoutます。これは私のサンプルコードです:

import QtQuick 2.0
import QtQuick.Layouts 1.0

Rectangle
{
    id: mainwindow
    width: 1024
    height: 600

    Row
    {
        id: rowlayout
        height: logoimage.height
        spacing: 5

        property int count: 3

        anchors
        {
            left: parent.left
            right: parent.right
            top: parent.top
        }   

        Image
        {   
            id: logoimage
            source: "qrc:/images/resources/images/icon.png"
            height: mainwindow.height / 20
            anchors.top: parent.top
            anchors.left: parent.left
        }   
        Text
        {   
            id: logotext
            text: qsTr("This is my logo text")
            font.pixelSize: parent.height
            font.family: "Sans Serif"
            height: parent.height
            verticalAlignment: Text.AlignVCenter
            anchors.top: parent.top
            anchors.left: logoimage.right
        }
        /*
        Rectangle
        {
            id: otherrect
            height: parent.height
            color: "lightgreen"
            anchors.top: parent.top
            anchors.left: logotext.right
            anchors.right: parent.right
        }
        */
    }
}

Rowコンポーネントの高さはロゴの高さに従うようにコンポーネントに指示し、 Image(ロゴ) コンポーネントには高さがRectangle(メインウィンドウ) コンポーネントの 1/20 になるように指示します。

コンテナーを使用するRowと、コードは期待どおりに動作しますが、迷惑な警告 ( QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row. Row will not function.) が表示され、多くのアンカーを行う必要があります。逆に、RowLayoutコンテナーを使用すると、ほとんどのアンカーを削除できますが、Imageその属性は完全に無視されheightます (ただし、テキストのサイズは正しく変更されます)。質問は次のとおりです。

  1. RowLayoutこれはコンポーネントのバグですか？AndroidをサポートするQt-5.1.0-Betaを使用しているため、これが説明になる可能性があります
  2. Row子にアンカーを使用せずにコンポーネントを使用して、警告を回避するにはどうすればよいですか?
  3. 何か重要なものを見逃しているか、ほぼ正しい軌道に乗っていますが、安定版がリリースされるまで Qt のこのベータ版を我慢しなければなりませんか?
4

3 に答える 3

5

Row で期待どおりの動作が得られるとおっしゃっていたので、おそらくそれを使用する必要があります。行が与えている警告は、その子要素から垂直アンカー (上下) を削除するように求めています。

Row 要素は、その子要素に水平 (左右) のアンカーのような動作を提供しますが、上下のアンカーを使用してもかまいません (上と下は警告に含まれていないことに注意してください)。

つまり、「anchors.left」および/または「anchors.right」の行を「logoimage」、「logotext」、および「otherrect」から削除します (いずれかの時点でコメント解除する予定がある場合)。 " 行であり、警告を停止し、正しい動作を維持する必要があります。

別の方法は、Row 要素を削除して、Item または FocusScope を使用することです (「トップ バー」領域に入力要素を配置する予定がある場合)。これは、アンカー操作を引き継ごうとはしません。あなたが本当にアンカーが好きなら。

于 2014-03-27T13:17:07.587 に答える
0

1) いいえ、RowLayout のバグではありません。2) RowLayout は、コンポーネントの配置で最も表現力があるため、Row よりも優先されると考えてください。Row コンポーネントは、グラフィックまたはアニメーション アプリ専用の Rowlayout よりも優れています 3) 安定版が利用可能になりましたが、エラーはバグではありません ;)

于 2013-08-08T14:01:36.063 に答える