代码之家  ›  专栏  ›  技术社区  ›  Wagmare

如何检测textItem的宽度并将另一个项目定位到右侧

  •  0
  • Wagmare  · 技术社区  · 7 年前

    我有一个QML TextItem,其中文本是动态设置的。宽度我无法确定,因为文本可以有任意数量的字符。 我需要在旁边放置另一个文本项。 因此,当我们无法确定文本的宽度时,如何定位到文本项的右侧,因为文本可以随时增长。不允许Wrap或Elide

    例如:

    Text
        {
            id: distance
            width: //dont know what to provide
    
            font.bold: true
    
            verticalAlignment:Text.AlignBottom
            horizontalAlignment:Text.AlignLeft
            maximumLineCount: 1
    
            onTextChanged:
            {
                console.log("$$$$$___Text is been changed:" + txt_distance.paintedWidth +" "+ paintedHeight)
    
            }
    
            anchors
            {
                bottom: parent.bottom
                bottomMargin: 2
                left: parent.left
                leftMargin: 20
                right: //Dont know what to give
    
            }
    

    和相邻项

    Text
        {
            id: address
    
            font.bold: true
    
            verticalAlignment:Text.AlignBottom
            horizontalAlignment:Text.AlignLeft
            maximumLineCount: 1
    
            anchors
            {
                bottom: parent.bottom
                bottomMargin: 2
                left: distance.right <-- Please help 
                right: parent.right
                rightMargin: 20
            }
        } 
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   augre    7 年前

    您不必显式设置 width 因为它将设置为 paintedWidth

    您的示例可以简化如下:

    Text {
        id: distance
        text: "Hello"
    }
    
    Text {
        text: "Wagmare"
        anchors.left: distance.right
    }
    

    更好的解决方案是使用 Row :

    Row {
        Text {
            text: "Hello"
        }
    
        Text {
            text: "Wagmare"
        }
    }
    

    看见 Use Case - Displaying Text In QML

    如果未明确设置宽度或高度,请读取这些属性 将返回文本边界矩形的参数(如果 明确设置了宽度或高度后,仍可以使用paintedWidth 和涂漆高度)。