Table of elements using ColumnLayout and RowLayout

Kyeiv · wrote on 20 Jul 2021, 06:58

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"
        }
    }
}

ndias · 20 Jul 2021, 11:36

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
            }
        }

    }

}

Best Regards

Kyeiv · 20 Jul 2021, 11:57

@ndias

this happens when applying your solution

ndias · K Kyeiv 20 Jul 2021, 11:36

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
        }

    }
}