Align text in the middle of nested layouts

Kyeiv

I am trying to achieve something like this:

some text:
                      first text: text
                     second text: text text
                  the third text: text text text

whith code:

ColumnLayout
                    {
                        anchors.fill: parent

                        Text {
                            Layout.alignment: Qt.AlignTop
                            text: "some text:"
                            color: "white"
                        }

                        ColumnLayout
                        {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignCenter

                            RowLayout {
                                Layout.alignment: Qt.AlignHCenter
                                Text {
                                    Layout.alignment: Qt.AlignHCenter
                                    text: modelsMap["model1"].label + ": "
                                    color: "white"
                                }
                                Text {
                                    text: modelsMap["model1"].value
                                    color: "white"
                                }
                            }
                            RowLayout {
                                Layout.alignment: Qt.AlignHCenter
                                Text {
                                    text: modelsMap["model2"].label + ": "
                                    color: "white"
                                }
                                Text {
                                    text: modelsMap["model2"].value
                                    color: "white"
                                }
                            }
                            RowLayout {
                                Layout.alignment: Qt.AlignHCenter
                                Text {
                                    
                                    text: modelsMap["model3"].label + ": "
                                    color: "white"
                                }
                                Text {
                                    text: modelsMap["model3"].value
                                    color: "white"
                                }
                            }

                        }
                        Item {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                        }
                    }

But for now i am getting:

some text:
                        first text: text
                     second text: text text
                the third text: text text text

What is wrong with my code?

raven-worx

@Kyeiv
use a GridLayout with 2 columns to achieve your desired output

Kyeiv

@raven-worx alright, thank you. one more question,

the code that worked with your help:

                        GridLayout {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignCenter
                            id: grid
                            columns: 2

                            Text { 
                                text: "first text:"; 
                                color: "white"; 
                                horizontalAlignment: Text.AlignRight
                                Layout.alignment: Qt.AlignRight
                                }
                            Text { text: "text"; color: "white"}
                            Text { 
                                text: "second text:"; 
                                color: "white"; 
                                horizontalAlignment: Text.AlignRight
                                Layout.alignment: Qt.AlignRight
                                }
                            Text { text: "text text"; color: "white"}
                            Text { 
                                text: "the third text:"; 
                                color: "white"; 
                                horizontalAlignment: Text.AlignRight
                                Layout.alignment: Qt.AlignRight
                                }
                            Text { text: "text text text"; color: "white"}
                        }

but i want to use it combined with Repeater and don't know how to do it, because as far as i know Repeater takes only one Item as delegate, for example one Text. Is there a way to make the Repeater print it with the desired formatting?

Something like:

                        GridLayout {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Layout.alignment: Qt.AlignCenter
                            id: grid
                            columns: 2

                          Repeater{
                           model: someList

                            Text { 
                                text: modelData.label; 
                                color: "white"; 
                                horizontalAlignment: Text.AlignRight
                                Layout.alignment: Qt.AlignRight
                                }
                            Text { text: modelData.value; color: "white"}
                           }
                            
                        }

raven-worx

@Kyeiv
you can iterate through the list and create the items yourself.
Simply set the parent of the item to the layout and it should be inserted into the layout.

Kyeiv

@raven-worx

tried this:

for (var prop in model.map {
                var labelText = Qt.createQmlObject('import QtQuick 2.5; Text { text: "'+model.map[prop].label + ": " +'"; \
                color: "white"; horizontalAlignment: Text.AlignRight;  }',
                    summaryGrid,
                    prop+"label");
                
                var valueText = Qt.createQmlObject('
                    import QtQuick 2.5;\
                    Text { text: "'+ model.map[prop].value +'"; color: "white";}',
                    summaryGrid,
                    prop+"value");
            }

But since Layout.alignment cannot be accessed when dynamically creating an object i am getting print like:

                      first text:       text
                      second text text: text
                      third:            text

raven-worx

@Kyeiv said in Align text in the middle of nested layouts:

But since Layout.alignment cannot be accessed when dynamically creating an object

what do you mean with that?!

Kyeiv

@raven-worx i cannot specify Layout.alignment in string creating Text because i get error that this property doesn't exist

QtWS: Early Bird Tickets Available!

Align text in the middle of nested layouts