<html>
  <head>
    <meta content="text/html; charset=ISO-8859-1"
      http-equiv="Content-Type">
  </head>
  <body text="#000000" bgcolor="#FFFFFF">
    Interresting discussion, I had the very same problem.<br>
    There is something not intuitive in this behaviour.<br>
    <br>
    I suggest to add a Spacer component to QtQuick.Controls <br>
    "Spacer.qml"<br>
    Item {<i><br>
           Layout.fillWidth: true <br>
      }</i><br>
    <br>
    Even if it is so simple, it would be usefull to find it in the
    documentation. <br>
    And everybody coming from QWidget layout design will search for it !<br>
    <br>
    Best regards,<br>
    <br>
    Stéphane<br>
    <br>
    <div class="moz-cite-prefix">Le 09-06-13 09:47, Bache-Wiig Jens a
      écrit :<br>
    </div>
    <blockquote
      cite="mid:%3CBE01E17A-FFC6-4FB2-8CF2-C465A3A1760F@digia.com%3E"
      type="cite">
      <pre wrap="">
On Jun 8, 2013, at 11:08 PM, Daiwei Li <a class="moz-txt-link-rfc2396E" href="mailto:daiweili@gmail.com"><daiweili@gmail.com></a> wrote:

</pre>
      <blockquote type="cite">
        <pre wrap="">Thanks, Jens. The spacer item solution works for me, but I'm not sure I completely understand what's going on here. I toyed around with this a litte more and I'm confused by this output:

import QtQuick 2.1
import QtQuick.Layouts 1.0

Item {
    width: 320
    height: 240
    ColumnLayout {
        anchors.left: parent.left
        anchors.right: parent.right
        RowLayout {
            Layout.fillWidth: true
            onWidthChanged: console.debug('row layout width: ', width);
            Text { text: 'foo'; onWidthChanged: console.debug('foo width: ', width); }
        }
    }
}

The above QML gave me:
foo width: 20.734375
row layout width: 20.734375
foo width: 21
row layout width: 21

but if I remove the Text element, I get:
row layout width: 320

Why doesn't Layout.fillWidth on the RowLayout apply when I have the Text inside of it?

Thanks,
Daiwei
</pre>
      </blockquote>
      <pre wrap="">
The layout will generally try to give everything it's implicitSize (or the Layout.preferred size when set ) and will never stretch an item unless you really ask for it. (i.e put Layout. fillWidth on an item) so that the text item does not expand in this case is entirely correct. I think you are right that it seems like a bug that the layout does not expand its width when it has no expanding items so you should report that to the bug tracker. 

Also note that Layout.fillWidth is the default value for all layouts so that line of code is redundant.

Regards,
Jens




</pre>
      <blockquote type="cite">
        <pre wrap="">

On Sat, Jun 8, 2013 at 12:17 AM, Bache-Wiig Jens <a class="moz-txt-link-rfc2396E" href="mailto:Jens.Bache-Wiig@digia.com"><Jens.Bache-Wiig@digia.com></a> wrote:

On Jun 7, 2013, at 11:55 PM, Daiwei Li <a class="moz-txt-link-rfc2396E" href="mailto:daiweili@gmail.com"><daiweili@gmail.com></a> wrote:

</pre>
        <blockquote type="cite">
          <pre wrap="">Hello all,

I'm having some trouble understanding what happens with the following QML:

import QtQuick 2.1
import QtQuick.Layouts 1.0

Item {
    width: 320
    height: 240
    ColumnLayout {
        anchors.left: parent.left
        anchors.right: parent.right
        RowLayout {
            Layout.fillWidth: true
            Text { text: 'foo' }
            Text { text: 'bar'; Layout.alignment: Qt.AlignRight }
        }
    }
}

I would expect the above code to look like good.png, but instead it looks like bad.png. If I get rid of the ColumnLayout and do the following, it works fine:


import QtQuick 2.1



import QtQuick.Layouts 1.0

Item {
    width: 320



    height: 240

    RowLayout {
        anchors.left: parent.left



        anchors.right: parent.right



        Text { text: 'foo' }



        Text { text: 'bar'; Layout.alignment: Qt.AlignRight }



    }
}

I'm able to work around the problem by putting a Layout.fillWidth: true in 'foo' in the first snippet, but I feel like I shouldn't need to do that.

Does anyone know what I'm doing wrong in the first example, or if it's a bug with QtQuickControls layouts?

</pre>
        </blockquote>
        <pre wrap="">


Layout.alignment does not work quite the way you assume here. Alignment only applies within the layout cell. (and makes more sense when using GridLayout where you can have  items of various width in the same column).  If you want the result to look like good.png you should add a simple spacer item in your layout. That spacer item will then take up whatever space is left on the layout and push your items to each side. In other words this should solve your problem:

import QtQuick 2.1
import QtQuick.Layouts 1.0

Item {
    width: 320
    height: 240
    ColumnLayout {
        anchors.left: parent.left
        anchors.right: parent.right
        RowLayout {
            Layout.fillWidth: true
            Text { text: 'foo' }
            Item { Layout.fillWidth: true }  //Added here
            Text { text: 'bar'; Layout.alignment: Qt.AlignRight }
        }
    }
}








</pre>
      </blockquote>
      <pre wrap="">

</pre>
    </blockquote>
    <br>
  </body>
</html>