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. aligning text RowLayout to another object
Forum Updated to NodeBB v4.3 + New Features

aligning text RowLayout to another object

Scheduled Pinned Locked Moved Solved QML and Qt Quick
11 Posts 2 Posters 1.8k 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
    mzimmers
    wrote on 3 Nov 2022, 16:47 last edited by
    #1

    Hi all -

    I'm trying to overlay some text onto another object (a circular slider), and am having troubles with the vertical alignment. (Horizontal alignment seems to work fine.) Here's my code -- the main Item is contained within a GridLayout:

    Item {
        id: sliderTile
    
        Layout.preferredHeight: tileHeight // property
        Layout.preferredWidth: tileWidth // property
    
        CircularSlider {
            id: circularSlider
    
            width: sliderTile.width * 0.8
            height: width
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: parent.top
            }
        }
        // I want this row (approximately) in the middle of the slider.
        RowLayout {
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: circularSlider.verticalCenter
            Label {
                id: nbr
                visible: sliderTile.labelVisible
                text: "20"
                font.pixelSize: sliderTile.labelFontSize
                font.weight: Font.Bold
            }
            Label {
                visible: sliderTile.labelVisible
                text: "gpm"
                font.pixelSize: sliderTile.labelUnitsSize
            }
        }
    }
    

    And here's what I'm getting:
    slidertext.PNG
    There are two problems with the vertical alignment:

    1. it's not in the center of the circular slider. Note: I'm only displaying the "upper" half of the slider, which is a complete circle, so I really do want my text in the vertical center of it.
    2. the two text items seem to be center aligning, instead of bottom aligning.

    Can someone please tell me what I might be doing wrong here?

    Thanks...

    1 Reply Last reply
    0
    • J Offline
      J Offline
      JoeCFD
      wrote on 3 Nov 2022, 18:03 last edited by JoeCFD 11 Mar 2022, 18:03
      #2

      Try it

      Item {
          id: sliderTile
      
          Layout.preferredHeight: tileHeight // property
          Layout.preferredWidth: tileWidth // property
      
          CircularSlider {
              id: circularSlider
      
              width: sliderTile.width * 0.8
              height: width
              anchors {
                  horizontalCenter: parent.horizontalCenter
                  top: parent.top
              }
          }
          // I want this row (approximately) in the middle of the slider.
          RowLayout {
              anchors.fill: parent
              anchors.horizontalCenter: parent.horizontalCenter
              anchors.bottom: circularSlider.verticalCenter       
              Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
              }
              Label {
                  id: nbr
                  visible: sliderTile.labelVisible
                  text: "20"
                  font.pixelSize: sliderTile.labelFontSize
                  font.weight: Font.Bold
              }
              Label {
                  visible: sliderTile.labelVisible
                  text: "gpm"
                  font.pixelSize: sliderTile.labelUnitsSize
              }        
              Item {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
             }
          }
      }
      
      M 1 Reply Last reply 3 Nov 2022, 18:12
      0
      • J JoeCFD
        3 Nov 2022, 18:03

        Try it

        Item {
            id: sliderTile
        
            Layout.preferredHeight: tileHeight // property
            Layout.preferredWidth: tileWidth // property
        
            CircularSlider {
                id: circularSlider
        
                width: sliderTile.width * 0.8
                height: width
                anchors {
                    horizontalCenter: parent.horizontalCenter
                    top: parent.top
                }
            }
            // I want this row (approximately) in the middle of the slider.
            RowLayout {
                anchors.fill: parent
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.bottom: circularSlider.verticalCenter       
                Item {
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                }
                Label {
                    id: nbr
                    visible: sliderTile.labelVisible
                    text: "20"
                    font.pixelSize: sliderTile.labelFontSize
                    font.weight: Font.Bold
                }
                Label {
                    visible: sliderTile.labelVisible
                    text: "gpm"
                    font.pixelSize: sliderTile.labelUnitsSize
                }        
                Item {
                      Layout.fillWidth: true
                      Layout.fillHeight: true
               }
            }
        }
        
        M Offline
        M Offline
        mzimmers
        wrote on 3 Nov 2022, 18:12 last edited by
        #3

        @JoeCFD no change.

        1 Reply Last reply
        0
        • J Offline
          J Offline
          JoeCFD
          wrote on 3 Nov 2022, 18:17 last edited by
          #4

          This is my test code. It works fine.

          import QtQuick          2.15
          import QtQuick.Controls 2.15
          import QtQuick.Layouts  1.15
          
          Item {
              id: sliderTile
          
              height: 150
              width:  300 
          
              property int labelUnitsSize: 20
          
              Rectangle {
                  id: circularSlider
          
                  width: sliderTile.width * 0.8
                  height: width
                  color: "green"
          
                  anchors {
                      horizontalCenter: parent.horizontalCenter
                      top: parent.top
                  }
              }
          
              // I want this row (approximately) in the middle of the slider.
              RowLayout {
                  anchors.fill: parent
                  anchors.horizontalCenter: parent.horizontalCenter
                  anchors.bottom: circularSlider.verticalCenter
                  Item {
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                  }
          
                  Label {
                      id: nbr
                      visible: true
                      text: "20"
                      font.pixelSize: sliderTile.labelUnitsSize
                      font.weight: Font.Bold
                  }
                  Label {
                      visible: true
                      text: "gpm"
                      font.pixelSize: sliderTile.labelUnitsSize
                  }
                  Item {
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                  }
              }
          }
          
          M 1 Reply Last reply 3 Nov 2022, 18:25
          1
          • J JoeCFD
            3 Nov 2022, 18:17

            This is my test code. It works fine.

            import QtQuick          2.15
            import QtQuick.Controls 2.15
            import QtQuick.Layouts  1.15
            
            Item {
                id: sliderTile
            
                height: 150
                width:  300 
            
                property int labelUnitsSize: 20
            
                Rectangle {
                    id: circularSlider
            
                    width: sliderTile.width * 0.8
                    height: width
                    color: "green"
            
                    anchors {
                        horizontalCenter: parent.horizontalCenter
                        top: parent.top
                    }
                }
            
                // I want this row (approximately) in the middle of the slider.
                RowLayout {
                    anchors.fill: parent
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.bottom: circularSlider.verticalCenter
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                    }
            
                    Label {
                        id: nbr
                        visible: true
                        text: "20"
                        font.pixelSize: sliderTile.labelUnitsSize
                        font.weight: Font.Bold
                    }
                    Label {
                        visible: true
                        text: "gpm"
                        font.pixelSize: sliderTile.labelUnitsSize
                    }
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                    }
                }
            }
            
            M Offline
            M Offline
            mzimmers
            wrote on 3 Nov 2022, 18:25 last edited by
            #5

            Yes it does. There must be something upstream in my app causing this. I'll try to pare down my parent code to something I can post here. Thanks...

            1 Reply Last reply
            0
            • J Offline
              J Offline
              JoeCFD
              wrote on 3 Nov 2022, 18:27 last edited by
              #6
                  Item {
                      Layout.fillWidth: true
                      Layout.fillHeight: true
                  }  works as spacer to push texts to the middle. It is very useful in layout.
              
              M 1 Reply Last reply 3 Nov 2022, 18:28
              1
              • J JoeCFD
                3 Nov 2022, 18:27
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                    }  works as spacer to push texts to the middle. It is very useful in layout.
                
                M Offline
                M Offline
                mzimmers
                wrote on 3 Nov 2022, 18:28 last edited by
                #7

                @JoeCFD yeah, that's a good tip. I've used it for pushing text to the edges, but not like this. I'll file this one away...thanks.

                M 1 Reply Last reply 3 Nov 2022, 19:05
                0
                • M mzimmers
                  3 Nov 2022, 18:28

                  @JoeCFD yeah, that's a good tip. I've used it for pushing text to the edges, but not like this. I'll file this one away...thanks.

                  M Offline
                  M Offline
                  mzimmers
                  wrote on 3 Nov 2022, 19:05 last edited by
                  #8

                  OK, here's a minimal full example:

                  import QtQuick
                  import QtQuick.Controls
                  import QtQuick.Layouts
                  
                  ApplicationWindow {
                      id: mainWindow
                      visible: true
                      width: 800
                      height: 480
                  
                      Item {
                          id: sliderTile
                          property bool labelVisible: true
                          property int labelFontSize: 36
                          property int labelUnitsSize: 18
                  
                          Rectangle {
                              anchors.fill: parent
                              anchors.horizontalCenter: parent.horizontalCenter
                              anchors.bottom: parent.verticalCenter
                  
                              RowLayout {
                                  Item {
                                      Layout.fillWidth: true
                                      Layout.fillHeight: true
                                  }
                                  Label {
                                      id: nbr
                                      visible: sliderTile.labelVisible
                                      text: "20" //Number(circularSlider.value).toFixed()
                                      font.pixelSize: sliderTile.labelFontSize
                                      font.weight: Font.Bold
                                  }
                                  Label {
                                      visible: sliderTile.labelVisible
                                      text: "gpm"//sliderTile.sliderUnits
                                      font.pixelSize: sliderTile.labelUnitsSize
                                  }
                                  Item {
                                      Layout.fillWidth: true
                                      Layout.fillHeight: true
                                  }
                              }
                          }
                      }
                  }
                  

                  fonts.PNG

                  1 Reply Last reply
                  0
                  • J Offline
                    J Offline
                    JoeCFD
                    wrote on 3 Nov 2022, 20:26 last edited by
                    #9

                    @mzimmers said in aligning text RowLayout to another object:

                    import QtQuick
                    import QtQuick.Controls
                    import QtQuick.Layouts

                    ApplicationWindow {
                    id: mainWindow
                    visible: true
                    width: 800
                    height: 480

                    Item {
                        id: sliderTile
                        property bool labelVisible: true
                        property int labelFontSize: 36
                        property int labelUnitsSize: 18
                    
                        Rectangle {
                            anchors.fill: parent
                            anchors.horizontalCenter: parent.horizontalCenter
                            anchors.bottom: parent.verticalCenter
                    
                            RowLayout {
                                Item {
                                    Layout.fillWidth: true
                                    Layout.fillHeight: true
                                }
                                Label {
                                    id: nbr
                                    visible: sliderTile.labelVisible
                                    text: "20" //Number(circularSlider.value).toFixed()
                                    font.pixelSize: sliderTile.labelFontSize
                                    font.weight: Font.Bold
                                }
                                Label {
                                    visible: sliderTile.labelVisible
                                    text: "gpm"//sliderTile.sliderUnits
                                    font.pixelSize: sliderTile.labelUnitsSize
                                }
                                Item {
                                    Layout.fillWidth: true
                                    Layout.fillHeight: true
                                }
                            }
                        }
                    }
                    

                    }

                    you see the size of your item is not defined and layout range is not set either.
                    add anchors.fill: parent to Item and then RowLayout. your code will work.

                    1 Reply Last reply
                    0
                    • M Offline
                      M Offline
                      mzimmers
                      wrote on 3 Nov 2022, 21:01 last edited by mzimmers 11 Mar 2022, 21:20
                      #10

                      Still didn't work. I've removed even more:

                      import QtQuick
                      import QtQuick.Controls
                      import QtQuick.Layouts
                      
                      ApplicationWindow {
                          id: mainWindow
                          visible: true
                          width: 800
                          height: 480
                      
                          RowLayout {
                              anchors.fill: parent
                              anchors.horizontalCenter: parent.horizontalCenter
                              anchors.bottom: parent.verticalCenter
                              Item {
                                  Layout.fillWidth: true
                                  Layout.fillHeight: true
                              }
                              Label {
                                  visible: true
                                  text: "20"
                                  font.pixelSize: 36
                              }
                              Label {
                                  visible: true
                                  text: "gpm"
                                  font.pixelSize: 18
                              }
                              Item {
                                  Layout.fillWidth: true
                                  Layout.fillHeight: true
                              }
                          }
                      }
                      

                      and get this:
                      fonts.PNG

                      EDIT:

                      This works:

                      import QtQuick
                      import QtQuick.Controls
                      import QtQuick.Layouts
                      
                      ApplicationWindow {
                          id: mainWindow
                          visible: true
                          width: 800
                          height: 480
                      
                          RowLayout {
                              anchors.fill: parent
                              anchors.horizontalCenter: parent.horizontalCenter
                              anchors.bottom: parent.verticalCenter
                              Item {
                                  Layout.fillWidth: true
                                  Layout.fillHeight: true
                              }
                              Label {
                                  visible: true
                                  anchors.baseline: parent.verticalCenter
                                  text: "20"
                                  font.pixelSize: 36
                              }
                              Label {
                                  visible: true
                                  anchors.baseline: parent.verticalCenter
                                  text: "gpm"
                                  font.pixelSize: 18
                              }
                              Item {
                                  Layout.fillWidth: true
                                  Layout.fillHeight: true
                              }
                          }
                      }
                      

                      fonts.PNG
                      Can the baseline for the individual items be set at the layout level, or do I need to do this for every item in the RowLayout? Thanks...

                      1 Reply Last reply
                      0
                      • J Offline
                        J Offline
                        JoeCFD
                        wrote on 4 Nov 2022, 13:57 last edited by JoeCFD 11 Apr 2022, 13:57
                        #11

                        I guess you can add another layout ColumnLayout for label gpm and allgn or push it to the botton of the layout

                        1 Reply Last reply
                        0

                        1/11

                        3 Nov 2022, 16:47

                        • Login

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