[beginner] playing with layouts



  • 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 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?



  • 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



  • 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


Log in to reply