[Interest] QtQuickControls Layout Question

Daiwei Li daiweili at gmail.com
Sat Jun 8 23:08:46 CEST 2013


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


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 }
>         }
>     }
> }
>
>
>
>
>
>
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20130608/2f80b3fb/attachment.html>


More information about the Interest mailing list