<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>