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.
  • mzimmersM Offline
    mzimmersM Offline
    mzimmers
    wrote on 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
    • JoeCFDJ Offline
      JoeCFDJ Offline
      JoeCFD
      wrote on last edited by JoeCFD
      #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
             }
          }
      }
      
      mzimmersM 1 Reply Last reply
      0
      • JoeCFDJ JoeCFD

        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
               }
            }
        }
        
        mzimmersM Offline
        mzimmersM Offline
        mzimmers
        wrote on last edited by
        #3

        @JoeCFD no change.

        1 Reply Last reply
        0
        • JoeCFDJ Offline
          JoeCFDJ Offline
          JoeCFD
          wrote on 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
                  }
              }
          }
          
          mzimmersM 1 Reply Last reply
          1
          • JoeCFDJ JoeCFD

            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
                    }
                }
            }
            
            mzimmersM Offline
            mzimmersM Offline
            mzimmers
            wrote on 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
            • JoeCFDJ Offline
              JoeCFDJ Offline
              JoeCFD
              wrote on 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.
              
              mzimmersM 1 Reply Last reply
              1
              • JoeCFDJ JoeCFD
                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                    }  works as spacer to push texts to the middle. It is very useful in layout.
                
                mzimmersM Offline
                mzimmersM Offline
                mzimmers
                wrote on 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.

                mzimmersM 1 Reply Last reply
                0
                • mzimmersM mzimmers

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

                  mzimmersM Offline
                  mzimmersM Offline
                  mzimmers
                  wrote on 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
                  • JoeCFDJ Offline
                    JoeCFDJ Offline
                    JoeCFD
                    wrote on 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
                    • mzimmersM Offline
                      mzimmersM Offline
                      mzimmers
                      wrote on last edited by mzimmers
                      #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
                      • JoeCFDJ Offline
                        JoeCFDJ Offline
                        JoeCFD
                        wrote on last edited by JoeCFD
                        #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

                        • Login

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