[Interest] QtQuickControls Layout Question

[Bache-Wiig Jens]

On Jun 8, 2013, at 11:08 PM, Daiwei Li <daiweili at gmail.com> wrote:

> 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

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




> 
> 
> On Sat, Jun 8, 2013 at 12:17 AM, Bache-Wiig Jens <Jens.Bache-Wiig at digia.com> wrote:
> 
> On Jun 7, 2013, at 11:55 PM, Daiwei Li <daiweili at gmail.com> wrote:
> 
> > 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?
> >
> 
> 
> 
> 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 }
>         }
>     }
> }
> 
> 
> 
> 
> 
> 
> 
>