Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved aligning text RowLayout to another object

    QML and Qt Quick
    2
    11
    310
    Loading More Posts
    • 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.
    • mzimmers
      mzimmers last edited by

      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 Reply Quote 0
      • JoeCFD
        JoeCFD last edited by 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
               }
            }
        }
        
        mzimmers 1 Reply Last reply Reply Quote 0
        • mzimmers
          mzimmers @JoeCFD last edited by

          @JoeCFD no change.

          1 Reply Last reply Reply Quote 0
          • JoeCFD
            JoeCFD last edited by

            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
                    }
                }
            }
            
            mzimmers 1 Reply Last reply Reply Quote 1
            • mzimmers
              mzimmers @JoeCFD last edited by

              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 Reply Quote 0
              • JoeCFD
                JoeCFD last edited by

                    Item {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                    }  works as spacer to push texts to the middle. It is very useful in layout.
                
                mzimmers 1 Reply Last reply Reply Quote 1
                • mzimmers
                  mzimmers @JoeCFD last edited by

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

                  mzimmers 1 Reply Last reply Reply Quote 0
                  • mzimmers
                    mzimmers @mzimmers last edited by

                    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 Reply Quote 0
                    • JoeCFD
                      JoeCFD last edited by

                      @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 Reply Quote 0
                      • mzimmers
                        mzimmers last edited by mzimmers

                        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 Reply Quote 0
                        • JoeCFD
                          JoeCFD last edited by JoeCFD

                          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 Reply Quote 0
                          • First post
                            Last post