[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