[SOLVED] Layout (ColumnLayout) margins doesn't work in SplitView

[rominf]

Hi.
I have SplitView containing ColumnLayout on my Qt Quick application window. It seems that ColumnLayout ignores margins. Here is the minimal running example:
@
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0

ApplicationWindow
{
id: app
width: 100
height: 100

SplitView
{
anchors.fill: parent

Rectangle
{
Layout.fillWidth: true
}

ColumnLayout
{
anchors.margins: 10

Rectangle
{
width:20
// I have tried this, didn't work either
// Layout.preferredWidth: 20
height: 50
}
}
}
}
@

Result:
!http://i.imgur.com/3y1V28T.png(Screenshot)!

Is this a bug or just my lack of understanding of layout concepts?

[Jens]

Layouts don't apply anchor margins. Anchors and Layouts are separate concepts but you can mix and match them as you see fit. I.e you can anchors layouts together to apply anchor margins or you can nest items with anchor margins inside a layout. I am not sure what you are trying to achieve with applying 10 px margins around the rectangle in the layout, but I might help you out if you can explain it.

[rominf]

Thank you for reply, Jens.

I'm sorry for vague example. It is too primitive to express the meaning.

What I'm trying to achieve is a program for drawing circles/ellipses with different algorithms.
Sorry for Russian language (Yes, I'm from Russia. People from Russia speak English badly mostly as you can see. :) I'm very sorry for mistakes, I'm trying my best). But I think screenshot is quite understandable even with Russian captions.
Screenshot (it is blurred because of compression):
!http://i.imgur.com/GaLh3FT.png(screenshot)!
Explanation of marks:

1. I want margins there. Labels and buttons are too close to borders.

2. I want those buttons to fill width (Their captions in English: "Choose black color", "Choose background color". This buttons are responsible for pen color). Unfortunately this code works as you see at screenshot:
   @
   GroupBox
   {
   title: "Цвет рисования"
   Layout.fillWidth: true

   ColumnLayout
   {
   spacing: 8

   RowLayout
   {
   spacing: 8

   Label
   {
   id: lblColor
   text: "Текущий цвет:"
   }

   Rectangle
   {
   height: lblColor.height
   width: height
   color: penColor
   border.color: invert(penColor)
   border.width: 1

   function invert(color)
   {
    return Qt.rgba(1 - color.r, 1 - color.g, 1 - color.b, 1);
   }
   
   MouseArea
   {
    anchors.fill: parent
    onClicked: colorDialog.open();
   }
   

   }
   }

   Button
   {
   text: "Выбрать чёрный цвет"
   Layout.fillWidth: true
   onClicked: penColor = penColorDefault;
   }

   Button
   {
   text: "Выбрать цвет фона"
   Layout.fillWidth: true
   onClicked: penColor = backgroundColor;
   }
   }
   }
   @

3. I want to have something like "form layout" from Qt Widgets. I've tried GridLayout but qml analyzer shows me that property "columns" is not defined. This can probably happen because of outdated Qt 5.1 version from openSUSE KDE repositories (I cannot spend 2 days of compile Qt 5.1 from Git :)). So I decided to forget about it and wait for updates. Now I'm using Grid.

[janarve]

Hi.
Thanks for the feedback
Answer to your bullet points:

As Jens pointed out, anchors.margins is only respected by the anchors.
You can usually use

@anchors.fill: parent; anchors.margins: 10@

but that only works if the layout is supposed to fill the whole area of the parent. This is not the case for SplitView. To workaround it, just add an Item around the ColumnLayout, and anchor it like described above.

2. You need to anchor the layout to the GroupBox with

@anchors.fill: parent@

in line 9.

3. GridLayout did not have support for columns and rows properties in its initial implementation, but it was added later. Your version might just be too old.

I hope this helps.

Jan Arve

[rominf]

Thank you for reply, Jan.

Your solution works! Adding Item around the ColumnLayout did the trick.

Unfortunately it doesn't work. I got lower buttons (near bullet point 1) on top of GroupBox with color and those errors in console:

@
main.qml:314:4: QML GroupBox: Binding loop detected for property "implicitWidth"
main.qml:314:4: QML GroupBox: Binding loop detected for property "implicitHeight"
@
When I add:
@width: parent.width@
it works as expected but I still get error:
@main.qml:314:4: QML GroupBox: Binding loop detected for property "implicitWidth"@
I'll use this solution.

OK, as I thought. I'll wait for updates from openSUSE KDE team.

[janarve]

Unfortunately I'm not sure I understand why you get a binding loop.

However, I can see another issue with your code:
@height: lblColor.height@

This is not recommended, and it might not behave as you'd expect (actually, I don't think it works for you). Basically, if you add an item to a Layout, you leave it to the layout to control the geometry of the item. Otherwise, there would be a conflict of interest (and the last one wins, whoever that is).

I suspect you try to set the height of the label to be the same as the color height so that the label is not top-left aligned. In the current version, there is a better way of achieving that: You can specify the alignment of an item in a layout with for instance
@Layout.alignment: Qt.AlignVCenter@

Jan Arve

[rominf]

[quote author="janarve" date="1368185991"]
However, I can see another issue with your code:
@height: lblColor.height@

This is not recommended, and it might not behave as you'd expect (actually, I don't think it works for you).[/quote]
It works for me. I wrote this line because without it the rectangle was invisible. So I had to specify height. I decided to make label's and rectangle's heights equal. After your post I've made explicit height:
@height: 16; width: 16;@
That works as good as before.

[quote author="janarve" date="1368185991"]
You can specify the alignment of an item in a layout with for instance
@Layout.alignment: Qt.AlignVCenter@
[/quote]
I've tried this line and got error:
@Cannot assign to non-existent property "alignment"@
I think this error is caused by the same reason: old Qt Quick Controls version in openSUSE KDE repositories. But I'm fully satisfied with the explicit height and the results.

Thank you very much for your time and answers, Jan!

[janarve]

Yes, the alignment was added after "columns" and "rows" was added, so that makes sense.