>

매우 간단한 작업을 수행해야합니다. 사각형 안에 텍스트를 표시하고 싶습니다. 해당 사각형의 크기는 텍스트의 너비 여야합니다.

C ++에서는 매우 쉽다. QString을 정의하고 QFontMetrics를 적용하여 너비를 얻으십시오. 그런 다음 사각형 그래픽 요소를 정의하여 해당 크기를 갖습니다. 5 분 안에 완료됩니다.

QML이 더 사용하기 쉽다고 들었습니다. 따라서 5 분 안에 그 문제를 해결할 것으로 기대했습니다. 나는하지 않았으며 여전히 붙어 있습니다. 내가 시도한 것은 다음과 같습니다.

Rectangle {
    width: myText.contentWidth
    height: myText.contentHeight
    Text {
        anchors.fill:parent
        id: myText
        font.family: "Helvetica"
        font.pointSize: 50
        text:  qsTr("The string I want to display")
    }
}

이것이 내가 이해할 수없는 이유로 작동하지 않습니다. 내 요구에 정확히 맞지 않는 방식으로 방법을 찾았습니다.

Rectangle {
    width: 100
    height: 100
    MouseArea {
       id: myMouseArea
       anchors.fill: parent
       onClicked: parent.width=myText.contentWidth 
       hoverEnabled: true
     }
    Text {
        anchors.fill:parent
        id: myText
        font.family: "Helvetica"
        font.pointSize: 50
        text:  qsTr("The string I want to display")
    }
}

이 경우 사각형을 클릭하면 올바른 너비를 얻습니다. 그럼에도 불구하고 올바른 크기의 사각형을 얻기 위해 클릭하지 않아도되기 때문에이 솔루션에 관심이 없습니다.

myText 때마다 사각형의 크기가 올바른 크기를 갖기를 원합니다.  텍스트를 변경합니다. onTextChanged 사용  텍스트 항목에서도 작동하지 않습니다.

여기서 무엇을 놓치고 있습니까?


  • 답변 # 1

    내가 아는 한 Qt 5.4에서 개발자가 글꼴 메트릭을 사용할 수 있었기 때문에 QML에서는 비교적 새롭습니다. 당신은 주로 FontMetrics 있어  그리고 TextMetrics . 간단한 사용법 예 :

    import QtQuick 2.4
    import QtQuick.Window 2.2
    Window {
        visible: true
        width: 280; height: 150
        TextMetrics {
            id: textMetrics
            font.family: "Arial"
            font.pixelSize: 50
            text: "Hello World"
        }
        Rectangle {
            width: textMetrics.width
            height: textMetrics.height
            color: "steelblue"
            Text {
                text: textMetrics.text
                font: textMetrics.font
            }
        }
    }
    
    

    Phrogz 가 언급 한대로   TextMetrics  유형은 줄 바꿈 된 텍스트 측정을 지원하지 않습니다.

    <시간> 수정

    가치있는 것에 대해 QML에서 메트릭을 사용할 필요가 없었습니다. 나를 위해 content*  또는 painted*  속성은 목적을 달성했으며, Qt 5.12부터는 잘 작동하는 것으로 보입니다. 일명이 :

    Rectangle {
        width: myText.contentWidth
        height: myText.contentHeight
        Text {
            anchors.fill:parent
            id: myText
            font.family: "Helvetica"
            font.pointSize: 50
            text:  qsTr("The string I want to display")
        }
    }
    
    

    뿐만 아니라

    Rectangle {
        width: myText.paintedWidth
        height: myText.paintedHeight
        Text {
            anchors.fill:parent
            id: myText
            font.family: "Helvetica"
            font.pointSize: 50
            text:  qsTr("The string I want to display")
        }
    }
    
    

    올바른 시각 동작을 생성하십시오.OP에서 제안한 간단한 사용 사례에 대한 측정 항목 사용을 선호합니다. 반대 크기의 경우-텍스트를 특정 크기에 맞추기-속성 조합으로 트릭을 수행 할 수 있습니다 (예 :

    Rectangle {
        anchors.centerIn: parent
        width: 200
        height: 30
        Text {
            anchors.fill: parent
            text: "Wonderful Text"
            minimumPixelSize: 2
            fontSizeMode: Text.Fit
            font.pixelSize: 200
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
        }
    }
    
    

    여기서 픽셀 크기는 단순히 위에 있지만 텍스트 크기는 2 의 최소 크기 때문에 여전히 맞습니다.  이 설정되고 텍스트에 앵커에 의해 정의 된 명확한 맞춤 정책과 명확한 경계가 있습니다.

  • 답변 # 2

    라벨 구성 요소가 작업을 수행 할 것이라고 확신합니다.

    import QtQuick 2.1
    import QtQuick.Controls 2.4
    ApplicationWindow {
        visible: true
        Column {
            Repeater {
                model: [
                    {"color": "red", "radius": 1},
                    {"color": "green", "radius": 2},
                    {"color": "blue", "radius": 3}
                ]
                Label {
                    padding: 0
                    text: modelData.color
                    font.family: "Helvetica"
                    font.pointSize: 50
                    background: Rectangle {
                       color: modelData.color
                       radius: modelData.radius
                    }
                }
            }
        }
    }
    
    

관련 자료

  • 이전 루비 pdf 리더를 사용하여 pdf 파싱
  • 다음 .net - iis6에서 파일 업로드 크기 제한 늘리기