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

Posted 2023-02-16

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

【英文标题】：How to position one label at the end of another label and center both of them

【发布时间】：2021-10-27 20:49:45

【问题描述】：

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

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
      
  

【问题讨论】：

你能提供一个关于你想要什么的架构吗？我很难用文字来弄清楚。

【参考方案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
        
    

【讨论】：

这太棒了，非常感谢！

【参考方案2】：

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

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

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

【讨论】：

如果我要换行，似乎不太好用。 endtext 应该就在句子的结尾之后，对我来说它在第二行。

查看我的编辑。您可以使用锚点甚至手动指定 y 值将 endText 垂直放置在您想要的任何位置。

发现另一个问题，请参阅我的编辑。谢谢！

哦，你想把它放在第二行的末尾吗？这似乎是一个单独的问题。我什至不知道有没有什么好的方法可以做到这一点。 Qt 并没有真正提供关于每行文本的非常清晰的信息。所以我不知道如何判断第二行在哪里结束。

我稍微改变了宽度，所以两条线的长度大致相同。我也想不出别的办法。