如何将一个标签放在另一个标签的末尾并将它们都居中

Question

基本上，我想显示一个文本，告诉用户开关是打开还是关闭。 “开”和“关”这两个词的背景很小，所以我认为制作两个标签可能会奏效。现在我有一个问题，我在硬编码第二个标签的位置，它看起来不干净，因为它们都没有居中。代码如下：

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
      }
  }
}

如何使该句子显示为一个句子并将其置于父对象的中心？

编辑： 在这里我可以将它们排成一行，但是如果我的句子在第二行结束并且我的第一行比第一行长，则结尾文本的放置位置比需要的位置更远：

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
      }
  }
}

Answer 1

您可以通过使用lineLaidOut signal 的Label 来做到这一点。它为您提供有关每条线的几何形状的信息（如果需要，您也可以修改它们）：

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

Window {
    id: root
    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 ")
            color: 'black'
            anchors.horizontalCenter: parent.horizontalCenter
            width: 300
            wrapMode: Text.Wrap
            font.pixelSize: 40
            anchors.top: parent.top
            property real lastLineY
            property real lastLineWidth
            onLineLaidOut: line => {
                               if (line.isLast) {
                                   lastLineY = line.y;
                                   lastLineWidth = line.implicitWidth
                               }
                           }
            Label {
                id: endText
                text: root.switchOn ? qsTr(" off ") : qsTr(" on ")
                font.pixelSize: 40
                color: "white"
                x: sentence.lastLineWidth
                y: sentence.lastLineY
                background: Rectangle {
                    color: root.switchOn ? "grey" : "red"
                    radius: 8
                }
            }
        }

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

Answer 2

您可以将标签放在一行内，并将行水平居中。

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

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