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. Best way to "align" items in Row
Forum Updated to NodeBB v4.3 + New Features

Best way to "align" items in Row

Scheduled Pinned Locked Moved Solved QML and Qt Quick
4 Posts 2 Posters 8.2k 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.
  • M Offline
    M Offline
    Mark81
    wrote on last edited by
    #1

    I'm aware I cannot use anchors in Column/Row but I'm asking how to achieve the same result. Basically I'm creating a simple "table" with labels on the left and items on the right. These right items can be StatusIndicator (so their width it's well-defined) or text. In this case I want the text right-aligned and that grows to the left, something like this:

    label1           LED
    label2           LED
    label3   textexttext
    

    Here my code:

    Column {
        id: column
        spacing: 5
        anchors.left: parent.left
        anchors.leftMargin: 20
    
        Row {
            Text {
                width: _LABEL_WIDTH
                text: qsTr("Label 1")
            }
    
            StatusIndicator {
                width: 30
                height: 30
                anchors.verticalCenterOffset: 3
                anchors.verticalCenter: labelOnline.verticalCenter
                active: true
            }
        }
    
        Row {
            Text {
                width: _LABEL_WIDTH
                text: qsTr("Label 2")
            }
    
            StatusIndicator {
                width: 30
                height: 30
                anchors.verticalCenterOffset: 3
                anchors.verticalCenter: labelOnline.verticalCenter
                active: true
            }
        }
    
        Row {
            Text {
                text: qsTr("Label 3")
            }
    
            Text {
                text: "blablabla"
                horizontalAlignment: Text.Right
                // how to fill all the space to the right margin?
            }
        }
    }
    
    M ODБOïO 2 Replies Last reply
    0
    • M Mark81

      I'm aware I cannot use anchors in Column/Row but I'm asking how to achieve the same result. Basically I'm creating a simple "table" with labels on the left and items on the right. These right items can be StatusIndicator (so their width it's well-defined) or text. In this case I want the text right-aligned and that grows to the left, something like this:

      label1           LED
      label2           LED
      label3   textexttext
      

      Here my code:

      Column {
          id: column
          spacing: 5
          anchors.left: parent.left
          anchors.leftMargin: 20
      
          Row {
              Text {
                  width: _LABEL_WIDTH
                  text: qsTr("Label 1")
              }
      
              StatusIndicator {
                  width: 30
                  height: 30
                  anchors.verticalCenterOffset: 3
                  anchors.verticalCenter: labelOnline.verticalCenter
                  active: true
              }
          }
      
          Row {
              Text {
                  width: _LABEL_WIDTH
                  text: qsTr("Label 2")
              }
      
              StatusIndicator {
                  width: 30
                  height: 30
                  anchors.verticalCenterOffset: 3
                  anchors.verticalCenter: labelOnline.verticalCenter
                  active: true
              }
          }
      
          Row {
              Text {
                  text: qsTr("Label 3")
              }
      
              Text {
                  text: "blablabla"
                  horizontalAlignment: Text.Right
                  // how to fill all the space to the right margin?
              }
          }
      }
      
      M Offline
      M Offline
      Mark81
      wrote on last edited by
      #2

      @Mark81 as ugly workaround I did something like this:

          Row {
              Text {
                  id: labelId
                  text: qsTr("Label 3")
              }
      
              Text {
                  width: column.width - labelId.width
                  text: "blablabla"
                  horizontalAlignment: Text.AlignRight
              }
          }
      
      1 Reply Last reply
      0
      • M Mark81

        I'm aware I cannot use anchors in Column/Row but I'm asking how to achieve the same result. Basically I'm creating a simple "table" with labels on the left and items on the right. These right items can be StatusIndicator (so their width it's well-defined) or text. In this case I want the text right-aligned and that grows to the left, something like this:

        label1           LED
        label2           LED
        label3   textexttext
        

        Here my code:

        Column {
            id: column
            spacing: 5
            anchors.left: parent.left
            anchors.leftMargin: 20
        
            Row {
                Text {
                    width: _LABEL_WIDTH
                    text: qsTr("Label 1")
                }
        
                StatusIndicator {
                    width: 30
                    height: 30
                    anchors.verticalCenterOffset: 3
                    anchors.verticalCenter: labelOnline.verticalCenter
                    active: true
                }
            }
        
            Row {
                Text {
                    width: _LABEL_WIDTH
                    text: qsTr("Label 2")
                }
        
                StatusIndicator {
                    width: 30
                    height: 30
                    anchors.verticalCenterOffset: 3
                    anchors.verticalCenter: labelOnline.verticalCenter
                    active: true
                }
            }
        
            Row {
                Text {
                    text: qsTr("Label 3")
                }
        
                Text {
                    text: "blablabla"
                    horizontalAlignment: Text.Right
                    // how to fill all the space to the right margin?
                }
            }
        }
        
        ODБOïO Offline
        ODБOïO Offline
        ODБOï
        wrote on last edited by ODБOï
        #3

        Hi @Mark81
        This can be done easily with layouts

           ColumnLayout {
                id: column
                height: parent.height
                width: parent.width
                RowLayout {
                    width: parent.width
                    Text {
                        text: qsTr("Label 1")
                        Layout.fillWidth: true
                    }
                    StatusIndicator {
                        Layout.alignment: Qt.AlignRight
                    }
                }
                RowLayout {
                     width: parent.width
                    Text {
                        text: qsTr("Label 3")
                        Layout.fillWidth: true
                    }
                    Text {
                        text: "blablablablablablablablablablablablablablabla"
                        Layout.alignment: Qt.AlignRight
                    }
                }
            }
        
        M 1 Reply Last reply
        2
        • ODБOïO ODБOï

          Hi @Mark81
          This can be done easily with layouts

             ColumnLayout {
                  id: column
                  height: parent.height
                  width: parent.width
                  RowLayout {
                      width: parent.width
                      Text {
                          text: qsTr("Label 1")
                          Layout.fillWidth: true
                      }
                      StatusIndicator {
                          Layout.alignment: Qt.AlignRight
                      }
                  }
                  RowLayout {
                       width: parent.width
                      Text {
                          text: qsTr("Label 3")
                          Layout.fillWidth: true
                      }
                      Text {
                          text: "blablablablablablablablablablablablablablabla"
                          Layout.alignment: Qt.AlignRight
                      }
                  }
              }
          
          M Offline
          M Offline
          Mark81
          wrote on last edited by
          #4

          @LeLev Interesting, I'll give it a try. Thanks.

          1 Reply Last reply
          0

          • Login

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