Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Table of elements using ColumnLayout and RowLayout



  • I want to achieve something like:

    ____________________________________
    |   some        text2       texrrr  |
     ___________________________________
    |  another    another222  another33 |
     ___________________________________
    |   txt1        txt22      text333  |
     ___________________________________
    | longtext    longtext   tooolong...|
    ____________________________________
    

    So table of Text aligned like in the example and with each row separated.

    And i dont know what to do when text is too big and interferes with another one

    I tried various combinations but every had some problems with this formatting, for example:

    ColumnLayout {
        anchors.fill: parent
        RowLayout{
            Layout.fillWidth: true
            Item
            {
                Layout.fillWidth: true
                height: bodyLabel.height
    
                Text
                {
                    id: bodyLabel
                    anchors.left: parent.left
                    text: "another"
                    color: "white"
                }
                Text
                {
                    anchors.horizontalCenter : parent.horizontalCenter
                    text: "another33"
                    color: "white"
                }
                Text
                {
                    anchors.right: parent.right
                    text: "another222"
                    color: "white"
                }
            }
        }
        Item
        {
            Layout.fillWidth: true
            height: 10
            Rectangle
            {
                height: 1
                width: parent.width
                anchors.centerIn: parent
                color: "grey"
            }
        }
    }
    

    and:

    ColumnLayout {
        anchors.fill: parent
        RowLayout{
            Layout.fillWidth: true
    
            Text
            {
                Layout.fillWidth: true
                text: "another"
                color: "white"
            }
            Text
            {
                Layout.fillWidth: true
                text: "another33"
                color: "white"
            }
            Text
            {
                Layout.fillWidth: true
                text: "another222"
                color: "white"
            }
        }
        Item
        {
            Layout.fillWidth: true
            height: 10
            Rectangle
            {
                height: 1
                width: parent.width
                anchors.centerIn: parent
                color: "grey"
            }
        }
    }
    


  • Hi @Kyeiv ,

    Please find solution bellow. You should use elide: Text.ElideRight to wrap text labels.

    import QtQuick
    import QtQuick.Window
    import QtQuick.Controls
    import QtQuick.Layouts
    
    Window {
    
        ColumnLayout {
            anchors.fill: parent
    
            RowLayout{
                Text {
                    Layout.fillWidth: true
                    text: "Text1a"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text1b"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text1c"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
            }
    
            Item {
                Layout.fillWidth: true
                height: 10
                Rectangle
                {
                    height: 1
                    width: parent.width
                    anchors.centerIn: parent
                    color: "grey"
                }
            }
    
            RowLayout{
                Text {
                    Layout.fillWidth: true
                    text: "Text2a"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text2b"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text2c"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
            }
    
            Item {
                Layout.fillWidth: true
                height: 10
                Rectangle
                {
                    height: 1
                    width: parent.width
                    anchors.centerIn: parent
                    color: "grey"
                }
            }
    
            RowLayout{
                Text {
                    Layout.fillWidth: true
                    text: "Text3a"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text3b"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text3c"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
            }
    
        }
    
    }
    

    d2c8b52e-53d4-4463-a747-46c00b0c542b-image.png

    Best Regards



  • Hi @Kyeiv ,

    Please find solution bellow. You should use elide: Text.ElideRight to wrap text labels.

    import QtQuick
    import QtQuick.Window
    import QtQuick.Controls
    import QtQuick.Layouts
    
    Window {
    
        ColumnLayout {
            anchors.fill: parent
    
            RowLayout{
                Text {
                    Layout.fillWidth: true
                    text: "Text1a"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text1b"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text1c"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
            }
    
            Item {
                Layout.fillWidth: true
                height: 10
                Rectangle
                {
                    height: 1
                    width: parent.width
                    anchors.centerIn: parent
                    color: "grey"
                }
            }
    
            RowLayout{
                Text {
                    Layout.fillWidth: true
                    text: "Text2a"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text2b"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text2c"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
            }
    
            Item {
                Layout.fillWidth: true
                height: 10
                Rectangle
                {
                    height: 1
                    width: parent.width
                    anchors.centerIn: parent
                    color: "grey"
                }
            }
    
            RowLayout{
                Text {
                    Layout.fillWidth: true
                    text: "Text3a"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text3b"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
                Text {
                    Layout.fillWidth: true
                    text: "Text3c"
                    horizontalAlignment : Text.AlignHCenter
                    elide: Text.ElideRight
                }
            }
    
        }
    
    }
    

    d2c8b52e-53d4-4463-a747-46c00b0c542b-image.png

    Best Regards



  • @ndias
    Screenshot from 2021-07-20 13-34-34.png

    this happens when applying your solution



  • Hi @Kyeiv ,
    I didn't realize that you wanted the elements of each line to line up with each other. In this case you can use GridLayout:

    
    import QtQuick
    import QtQuick.Window
    import QtQuick.Controls
    import QtQuick.Layouts
    
    Window {
    
        GridLayout {
            anchors.fill: parent
    
            columns: 3
            //rows: 5
    
    
            Text {
                Layout.fillWidth: true
                text: "Text1a Looooooooog"
                horizontalAlignment : Text.AlignHCenter
                elide: Text.ElideRight
            }
            Text {
                Layout.fillWidth: true
                text: "Text1b"
                horizontalAlignment : Text.AlignHCenter
                elide: Text.ElideRight
            }
            Text {
                Layout.fillWidth: true
                text: "Text1c"
                horizontalAlignment : Text.AlignHCenter
                elide: Text.ElideRight
            }
    
    
            Item {
                Layout.columnSpan: 3
                Layout.fillWidth: true
                height: 10
                Rectangle
                {
                    height: 1
                    width: parent.width
                    anchors.centerIn: parent
                    color: "grey"
                }
            }
    
    
            Text {
                Layout.fillWidth: true
                text: "Text2a"
                horizontalAlignment : Text.AlignHCenter
                elide: Text.ElideRight
            }
            Text {
                Layout.fillWidth: true
                text: "Text2b Looooooooog"
                horizontalAlignment : Text.AlignHCenter
                elide: Text.ElideRight
            }
            Text {
                Layout.fillWidth: true
                text: "Text2c"
                horizontalAlignment : Text.AlignHCenter
                elide: Text.ElideRight
            }
    ´
    
            Item {
                Layout.columnSpan: 3
                Layout.fillWidth: true
                height: 10
                Rectangle
                {
                    height: 1
                    width: parent.width
                    anchors.centerIn: parent
                    color: "grey"
                }
            }
    
    
            Text {
                Layout.fillWidth: true
                text: "Text3a"
                horizontalAlignment : Text.AlignHCenter
                elide: Text.ElideRight
            }
            Text {
                Layout.fillWidth: true
                text: "Text3b"
                horizontalAlignment : Text.AlignHCenter
                elide: Text.ElideRight
            }
            Text {
                Layout.fillWidth: true
                text: "Text3c Looooooooog"
                horizontalAlignment : Text.AlignHCenter
                elide: Text.ElideRight
            }
    
        }
    }
    

    80bb60b9-e0d8-4200-9aff-b91995e3daf7-image.png
    da6d1565-5132-45f8-bd56-95be08ea8f2f-image.png