How to position one label at the end of another label and center both of them-CodePudding

Basically I want to display a text telling the user if a switch is turned on or off. The words "on" and "off" have a small background associated with them so I thought maybe making two labels would work. Now I have an issue where I'm hard coding the position of the second label, and it doesn't look clean because both of them are not centered. Here is the code:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.0

Window {
  visible: true
  width: 400
  height: 400

  property bool switchOn: false

  Rectangle {
      color: '#D3D3D3'
      anchors.fill: parent

      Label {
          id: sentence
          text: qsTr("The switch is currently turned ")
          color: 'black'
          width: parent.width
          wrapMode: Text.Wrap
          font.pixelSize: 40
          anchors.top: parent.top
          Label {
              id: endText
              text: switchOn ? qsTr(" off ") : qsTr(" on ")
              font.pixelSize: 40
              color: "white"
              anchors {
                  top: parent.top
                  left: parent.left
                  topMargin: 50
                  leftMargin: 310
              }

              // @disable-check M16
              background: Rectangle {
                  color: switchOn ? "grey" : "red"
                  radius: 8
              }
          }
      }

      Switch {
          id: switch1
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.top: parent.top
          anchors.topMargin: 150
          text: qsTr("Switch")
          onToggled: switchOn = !switchOn
      }
  }
}

How can I have that sentence appear as one sentence and center it within a parent object?

EDIT: Here I can get them in a row, but if my sentence ends on the second row and my first row is longer than the first, the ending text is placed way further than it needs to be:

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.0

Window {
  visible: true
  width: 400
  height: 400

  property bool switchOn: false

  Rectangle {
      color: '#D3D3D3'
      anchors.fill: parent

      Row {
          anchors.horizontalCenter: parent.horizontalCenter

          Label {
              id: sentence
              text: qsTr("The switch is currently ")
              color: 'black'
              width: 300
              wrapMode: Text.Wrap
              font.pixelSize: 40
              anchors.top: parent.top
          }
          Label {
              id: endText
              text: switchOn ? qsTr(" off ") : qsTr(" on ")
              font.pixelSize: 40
              color: "white"
              anchors.top: sentence.top
              anchors.topMargin: 45
              // @disable-check M16
              background: Rectangle {
                  color: switchOn ? "grey" : "red"
                  radius: 8
              }
          }
      }

      Switch {
          id: switch1
          anchors.horizontalCenter: parent.horizontalCenter
          anchors.top: parent.top
          anchors.topMargin: 150
          text: qsTr("Switch")
          onToggled: switchOn = !switchOn
      }
  }
}

CodePudding user response：

You can put the Labels within a Row, and horizontally center the Row.

Rectangle {
    color: '#D3D3D3'
    anchors.fill: parent

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
     
        Label {
            id: sentence
            ...
        }
        Label {
            id: endText
            anchors.top: sentence.top
            ...
        }
    }
}