[beginner] playing with layouts

Zhitoune

Hello,

I'm having trouble keeping a specific positionning of various element while complexifying my code.

I first wanted to display a window a specific size with at its top 2 buttons separated by a slider. And I want them evenly positionned along the width of the window.
this works :

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1

Item {
    id: rootI
    width: 1000
    height: 600
    RowLayout {
            id:rLayout
            anchors.fill: parent
            Button {
                id: traceB
                text: "Plot"
            }
            Slider {
                id: topSlider
                from: 0
                to: 255
                value: 51
                Layout.alignment: Qt.AlignHCenter
            }
            Button {
                id: lastButton
                text: "erase"
                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
            }
        }       
}

then I tried to add a Slider that be at the bottom of the window spread along the width of the window. So I encapsumated the RowLayout into a ColumnLayout :

import QtQuick 2.7
import QtQuick.Layouts 1.1
import QtQuick.Controls 2.1

Item {
    id: rootI
    width: 1000
    height: 600
    ColumnLayout {
        id: cLayout
        anchors.fill: parent
        RowLayout {
            id:rLayout
            anchors.fill: parent
            Button {
                id: traceB
                text: "Plot"
            }
            Slider {
                id: topSlider
                from: 0
                to: 255
                value: 51
                Layout.alignment: Qt.AlignHCenter
            }
            Button {
                id: lastButton
                text: "erase"
                Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
            }
        }
        Slider {
            anchors.bottom: cLayout.bottom
            id:bottomSlider
            from: 0
            to: 800
            value: 666
            Layout.fillWidth: true
        }
    }
}

everything is fine except the elements of the RowLayout are all stacked up on the left side of the window. I don't understand why is that, I didn't change the code in RowLayout, and I can't find a way to get to the result I'd like.
thanks in advance

Zhitoune

Thanks a lot for your answer.
So I Guess that to achieve what I want I either have to encapsulate my RowLayout into a graphical object (like a rectangle) or use a GridLayout.
Thanks again

Eeli K

@Zhitoune At least you shouldn't do this:

ColumnLayout {
        anchors.fill: parent //good, it's inside a non-layout item
        RowLayout {
            anchors.fill: parent //not this!

In general, the purpose of a layout is to handle the location of its items. Specifying anchors for the items inside messes up this purpose.

I suggest you open your design with the Qt Creator and play with the item tree, positions and Layout anchors there. We can also easily edit your example if you give more details of what you want. Should the row layout spread along with the parent? Should it be centered vertically in the parent, or in the empty space between the top of the parent and the top of the bottom slider? What should happen when the's not enough vertical space?

Zhitoune

Thanks a lot for your answer.
So I Guess that to achieve what I want I either have to encapsulate my RowLayout into a graphical object (like a rectangle) or use a GridLayout.
Thanks again

Zhitoune

hum
I' new to this forum How do change the Solve/unsolved flag? I find a way but I'm not entirely sure it's the proper one