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