[C++,QT/Qml]2. Qml 프로그래밍 text 사용하기 1(텍스트 마지막에 ...출력하기)

[C++,QT/Qml]2. Qml 프로그래밍 text 사용하기 1

(텍스트 마지막에 ...출력하기)

 

 

안녕하세요 고급 프로그래머가 꿈인 코린이 입니다.

 

오늘은 QML프로그래밍 중에서 가장 기본인 text출력에 대해서 알아보도록 하겠습니다.

 

text출력은 QML프로그래밍 중에서 가장 기본이 되고 간단하지만 사용자의 요구사항을 맞추려면

 

그렇게 간단하지가 않은 것이 text출력 입니다.

 

예를 들어 text에 길이가 길다면 마지막에... 을 표시한다던가 어느 정도 길이 이상이 되면 다음 줄로 넘어간다거나 

 

사용자의 요구사항에 따라 다르게 적용해야 하는 게 텍스트이고 

 

요구사항에 따라 다르게 구현해야 하는 것이 text입니다. 

 

현업에 종사하다 보면 리스트의 텍스트는 길이가 길면 3줄까지는 줄을 바꾸고 그 이상이 되면...을 표시해야한다거나

 

은근히 어려운게 text입니다.

 

그래서 이글에서는 text의 다양한 사용법에 대해서 포스팅 하겠습니다.

 

 

 

1.기본 text출력

qt같은 경우에는 문서 정리가 아주 잘되어 있습니다. 그래서 우선 qt사이트에 문서들은 참고해 봅니다.

 

https://doc.qt.io/qt-5/qml-qtquick-text.html

Text QML Type | Qt Quick 5.12.3

이 url은 qml의 text를 설명한 것으로 사이트에 들어가보면 text의 각 속성들을 설명 해주고 있습니다.

 

이중에 중요하게 봐야할 부분은 text가 어떠한 것을 상속 받았는지를 알아야합니다. 

 

이 부분은 QML프로그래밍을 하는 것중에 가장 중요한 것으로 각 타입들이 어떠한 타입들을 상속 받았냐에 따라서

 

상속 받은 요소들을 사용 할수 있다는 것 입니다.

 

아래 그림으로 설명 드리겠습니다. 

 

import QtQuick 2.9
import QtQuick.Window 2.2
Window {    
    visible: true
    width: 640 //창의 넓이를 640
    height: 480 //창의 높이를 480
    title: qsTr("Hello World") //작업 표시줄의 제목을 Hello World로 출력
 
 
    Text{
        x:50 //text x좌표를 50
        y:50 //y좌표를 50
        width:200 //text의 넓이를 200
        height:100 //text의 높이는 100
        text:qsTr("Hello World") //Hellow World란 텍스트 출력
        font.pixelSize: 30 //텍스트의 사이즈를 30으로 설정
    }
}
 
 
 
 
 

위 코드를 실행한 이미지

 

위 코드를 실행한 이미지 입니다.

 

위에 코드를 보면 x,y,width,height등 여러가지 속성을 이용해서 text를 출력했습니다.

 

그런데 위에서 언급드린 QML 타입 정리 사이트에 가보시면 x,y,width,height등은 어디에도 찾아 볼수가 없습니다.

 

그 이유는 text가 item을 상속 받고 있기 때문 입니다. 위 사이트에 가보시면 text는 Inherits item이라고 되어있습니다.

 

즉 text는 item을 상속 받기 때문에 item의 요소인 x,y,width,height등을 사용 할수 있다는 것입니다.

 

위의 URL에서 item을 클릭하면 item의 속성들이 나열 됩니다.

 

이런 상속받은 속성을 사용하는 방법은 추후에 listview나 stackview등을 구현할때

 

많이 사용하는 내용으로 정확이 알고있으면 찾아보기도 쉽고

 

사용하려는는 타입의 속성이 어떠한 것들이 있는지 상속받은 속성이 있는지를 아는데 아주 도움이 됩니다.

 

그래서 요구하는 내용을 좀더 쉽게 구현이 가능하게 됩니다.

 

 

2. text의 영역의 넓이 및 높이 보이기

 

text의 영역의 넓이 및 높이 보이기는 현업에서 가장 많이사용하는 방법입니다.

 

text뿐만 아니라 QML의 모든 타입에 쓸수 있는 내용으로 제가 적용한 width,heith값을 한눈에 확인 하기위한 방법 입니다.

 

아래의 코드를 봅니다.

import QtQuick 2.9
import QtQuick.Window 2.2
Window {    
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
 
    Text{
        x:50
        y:50
        width:200
        height:100
        text:qsTr("Hello World")
        font.pixelSize: 30    
        Rectangle{ // text의 영역을 보여주기 위한 Rectangle type       
                    
            anchors.fill: parent // Rectangle의 부모 요소 여기서 부모는 Rectangle이 Text안에 있기때문에 
 //Rectangle의 부모는 id가 text인 Text가 된다.  
            border.color: "green" //테두리 색            
            color:"transparent"    // Rectangle의 배경색. 배경색을 투명으로 안하면 text위에 덮어져서 
 // text가 안보이게 된다.
        }    
    }
}
 
 
 
 
 
 
 
 

위의 코드를 실행 시켜 보면 위에 이미지 처럼 실행이 됩니다.

 

한눈에 봐도 텍스트의 width,height가 한눈에 보이죠?? 

 

 이 내용을 가장 많이 쓰는 이유는 프로그램을 만들때 여러가지 QML타입 들을 사용하게 됩니다.

 

listview,button,image,text등 여러가지의 qml타입들을 쓰는데 이 타입들을 한 화면에 여러개가 보여줘야할때 위치들이

 

살짝 꼬인다거나 원하는 위치에 오지 않는 경우가 많습니다. 어떠한 경우에는 분명히 type을 선언했는데

 

출력인 안되는 경우도 있고요. 그래서 이러한 경우에 정확하게 어떻게 출력이 되는지를 알기위해 위와 같이 

 

border을 써서 정확한 영역과 x,y좌표들의 시작점들을 알수 있습니다.

 

필자도 막상 구현하고 나서 생각대로 안나오는 경우 위와같은 방법으로 출력하고 버그를 찾고 있습니다.

 

3. text의 마지막에 ...표시 구현하기 (elide속성)

 

위의 코드를 보다보면 text의 width가 왜 필요하지?? 라는 의문이 듭니다.

 

어차피 텍스트의 길이만큼만 출력되는 것이 아닌까??라는 의문이 듭니다.

 

하지만 다음 코드에서 text width가 왜 필요한지 설명을 드리겠습니다.

 

아래 두개의 코드와 실행 화면을 비교해 봅니다.

 

1. ...적용을 안한 코드

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
 
 
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Text
    {        
        x:50
        y:50
        width:300
        height:100
        text: "Hello World Hello World Hello World Hello World"
        //elide:Text.ElideRight
        font.pixelSize: 30
        Rectangle
        {
            anchors.fill: parent
            border.color:"green"           
            color:"transparent"
 
        }
    }   
 
    Button
    {
        x:360
        y:50
        width:100
        height:100
 
    }
}
 
 
 
 

2. ...코드를 적용한 코드

 

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
 
 
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
 
    Text
    {        
        x:50
        y:50
        width:300
        height:100
        text: "Hello World Hello World Hello World Hello World"
        elide:Text.ElideRight // 텍스트의 넓이가 설정한 width값을 넘었을때 
                              //텍스트의 왼쪽에 ...을 표시 한다.
        font.pixelSize: 30
        Rectangle
        {
            anchors.fill: parent
            border.color:"green"           
            color:"transparent"
 
        }
    }   
 
    Button
    {
        x:360
        y:50
        width:100
        height:100
 
    }
}
 
 
 
 

 

 

첫번째 코드와 두번째 코드를 비교해보면 text의 속성에 elide값이 있나 없나의 차이가 있습니다.

 

위처럼 텍스트 옆에 버튼을 놓고 싶은데 텍스트의 길이가 길어서 텍스트 왼쪽에 ...이 필요한 경우

 

2번째 코드와 같이 elide속성을 사용 하면 됩니다.

 

물론 위와같은 코드는 text의 출력 값을 어딘가에서 받아와서 출력할때 쓰는 표현으로 받아온 텍스트 값의 

 

길이가 적을수도 많을 수도 있기때문에 이 두가지 경우를 고려한 코드 입니다.

 

첫번째는 text글자 수대로 그냥 출력한 내용이고 두번째 코드는 text width를 넘으면 

 

맨 마지막 텍스트를 ...으로 표시하는 코드 입니다.

 

네 이번 포스팅에서는 QML의 기본 텍스트 출력 및 속성 보는 방법을 보았습니다.

 

다음 포스팅에서는 QML의 텍스트 출력중에 많이 사용하는 속성들을 보겠습니다.

 

긴 글이었는데 봐주셔서 감사합니다.!! 이상 고급개발자가 꿈인 코린이 였습니다.