Using margins combined with layouts



  • Hey all,
    I have a UI that features Layouts nested in Layouts (i.e. a RowLayout somewhere within a ColumnLayout, filling width and height).
    It would be great if I could use margins alongside, but it doesn't seem to have any effect if I don't use anchors to place the elements.
    Is there a little workaround for that or do I have to choose one technique?

    Following is a little example. How would I go about setting margins for one of the nested Layouts in there?

    ColumnLayout
    {
        anchors.fill: parent
    
        spacing: 0
    
        Rectangle
        {
            Layout.fillWidth: true
    
            color: "darkblue"
            height: 35
        }
    
        RowLayout
        {
            Layout.fillWidth: true
            Layout.fillHeight: true
    
            spacing: 5
    
            ColumnLayout
            {
                id: centerLeftColumnLayout
    
                Layout.fillWidth: true
                Layout.fillHeight: true
    
                Rectangle
                {
                    Layout.fillWidth: true
    
                    color: "yellowgreen"
                    height: 30
                }
    
                Rectangle
                {
                    id: signalTiles
    
                    Layout.fillWidth: true
                    Layout.fillHeight: true
    
                    color: "lightblue"
                }
    
                Rectangle
                {
                    Layout.fillWidth: true
    
                    color: "green"
                    height: 50
                }
            }
    
            ColumnLayout
            {
                Layout.fillWidth: true
                Layout.fillHeight: true
    
                spacing: 0
    
                Rectangle
                {
                    Layout.fillWidth: true
    
                    color: "red"
                    height: 30
                }
    
                Rectangle
                {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
    
                    color: "blue"
                }
            }
        }
    
        Rectangle
        {
            Layout.fillWidth: true
    
            color: "orange"
            height: 40
        }
    }


  • Hi,

    I solved this kind of problem by wrapping the items to be laid out into rectangles.
    This way you can use the anchors margin properties inside the rectangle as you wish and the layout is done for the rectangles.

    Hope this helps!
    cheers,
    Manfred



  • @Manfred That was my first intention, but it makes the code harder to read.



  • You could put the content of the outer rectangles inside a component.
    This way the code would be hidden away in a separate qml file.

    cheers
    Manfred


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.