Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Align text in the middle of nested layouts
Forum Updated to NodeBB v4.3 + New Features

Align text in the middle of nested layouts

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
columnlayoutrowlayouttextcenternested
7 Posts 2 Posters 1.4k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • K Offline
    K Offline
    Kyeiv
    wrote on 29 Jun 2021, 07:07 last edited by
    #1

    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?

    R 1 Reply Last reply 29 Jun 2021, 08:49
    0
    • K Kyeiv
      29 Jun 2021, 07:07

      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?

      R Offline
      R Offline
      raven-worx
      Moderators
      wrote on 29 Jun 2021, 08:49 last edited by
      #2

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

      --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
      If you have a question please use the forum so others can benefit from the solution in the future

      K 1 Reply Last reply 29 Jun 2021, 10:10
      0
      • R raven-worx
        29 Jun 2021, 08:49

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

        K Offline
        K Offline
        Kyeiv
        wrote on 29 Jun 2021, 10:10 last edited by
        #3

        @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"}
                                   }
                                    
                                }
        
        R 1 Reply Last reply 29 Jun 2021, 10:50
        0
        • K Kyeiv
          29 Jun 2021, 10:10

          @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"}
                                     }
                                      
                                  }
          
          R Offline
          R Offline
          raven-worx
          Moderators
          wrote on 29 Jun 2021, 10:50 last edited by
          #4

          @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.

          --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
          If you have a question please use the forum so others can benefit from the solution in the future

          K 1 Reply Last reply 1 Jul 2021, 08:45
          0
          • R raven-worx
            29 Jun 2021, 10:50

            @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.

            K Offline
            K Offline
            Kyeiv
            wrote on 1 Jul 2021, 08:45 last edited by
            #5

            @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
            
            R 1 Reply Last reply 1 Jul 2021, 09:55
            0
            • K Kyeiv
              1 Jul 2021, 08:45

              @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
              
              R Offline
              R Offline
              raven-worx
              Moderators
              wrote on 1 Jul 2021, 09:55 last edited by
              #6

              @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?!

              --- SUPPORT REQUESTS VIA CHAT WILL BE IGNORED ---
              If you have a question please use the forum so others can benefit from the solution in the future

              K 1 Reply Last reply 1 Jul 2021, 10:45
              0
              • R raven-worx
                1 Jul 2021, 09:55

                @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?!

                K Offline
                K Offline
                Kyeiv
                wrote on 1 Jul 2021, 10:45 last edited by
                #7

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

                1 Reply Last reply
                0

                1/7

                29 Jun 2021, 07:07

                • Login

                • Login or register to search.
                1 out of 7
                • First post
                  1/7
                  Last post
                0
                • Categories
                • Recent
                • Tags
                • Popular
                • Users
                • Groups
                • Search
                • Get Qt Extensions
                • Unsolved