Can we align text in Text element which is part of Grid?



  • Here is my code:

    @ Grid {
    columns: 2
    rows: 2

        spacing: 10
    
        x: 5
        y: 5
    
        Text {
            id: employee
            text: "Employee"
        }
    
        Text {
            id: salary
            text: "Salary"
        }
    
        Text {
            id: name
            text: "John"
        }
    
        Text {
            id: amount
            text: "50k"
        }
    

    }@

    The alignment properties doesn't work in Text elements when they are inside the Grid. Is there a way to make them work? Is there another way I can show this table with good alignment?

    I want to have the name right aligned and salary amount horizontal center aligned.



  • Hi,

    Did you try set width and height properties to every Text element? Another way you can use "ListView":http://doc.qt.io/qt-5/qml-qtquick-listview.html :
    @
    ListModel {
    id: model
    ListElement {
    title: "Employee"
    value: "John"
    }
    ListElement {
    title: "Salary"
    value: "50k"
    }
    }

    ListView {
        id: list
        anchors.fill: parent
        model: model
        delegate: Rectangle {
            id: itemView
            width: list.width
            height: 30
            color: "red"
    
            Row {
                anchors.fill: parent
                spacing: 20
    
                Text {
                    id: nameText
                    width: (parent.width / 2) - 10
                    height: parent.height
                    verticalAlignment: Qt.AlignVCenter
                    text: model.title
                    horizontalAlignment: Text.AlignRight
                }
    
                Text {
                    id: valueText
                    width: (parent.width / 2) - 10
                    height: parent.height
                    verticalAlignment: Qt.AlignVCenter
                    text: model.value
                }
            }
        }
    }
    

    @

    Also you can use "TableView":http://doc.qt.io/qt-5/qml-qtquick-controls-tabview.html component from QtQuick Controls module.


Log in to reply
 

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