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 2.1k 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.
  • 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