[Interest] QtQuickControls Layout Question

[Bache-Wiig Jens]

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