[C++,QT/Qml]3. Qml 프로그래밍 text 사용하기 2(텍스트 줄바 꿈)

[C++,QT/Qml]3. Qml 프로그래밍 text 사용하기 2(텍스트 줄바 꿈)

 

안녕하세요 고급 개발자가 꿈인 코린이 입니다.

 

오늘은 현업에서 많이 쓰는 텍스트 줄바꿈에 대해서 포스팅 하겠습니다.

 

텍스트 줄바 꿈관련 내용들은 현업에서 가장 많이 사용이 됩니다.

 

텍스트를 출력해주는것이 고정인 경우도 있지만 서버에서 받아오는 데이터나 다른 앱에서 받아오는

 

데이터들을 출력하게 되면 텍스트의 길이가 어느 정도 되는지 저희 앱에서는 모르기 때문에

 

텍스트가 길었을때 상황도 항상 고려 해야합니다.

 

그래서 이런 사황을 모두 고려하기위해서 오늘 포스팅은 텍스트 줄바꿈에 대해서 준비해 보았습니다.

 

1. 텍스트의 길이가 길면 아무데서나 줄바꿈을 하는 경우(wrapMode 속성)

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"
        wrapMode:Text.WrapAnywhere//텍스트 줄바꿈을 text width에 도달하면
                                   // 그 위치에서 줄바꿈 해준다. 
        //wrapMode:Text.WordWrap
        font.pixelSize: 30
        Rectangle
        {
            anchors.fill: parent
            border.color:"green"
            color:"transparent"
        }
    }   
 
    Button
    {
        x:360
        y:50
        width:100
        height:100
 
    }
}
 
 
 

 

위의 코들를 보면 text에 wrapMode라는 속성이 있습니다.

 

wrapMode는 어떠한 경우에 text를 줄바꿈 할것인지 설정해주는 속성 입니다.

 

wrapMode를 Text.WrapAnywhere로 설정하면 text의 길이가 text에 설정한 width에 도달한 경우

 

도달한 위치에서 줄바꿈이 이루어 집니다. 즉 위의 실행 화면 처럼 Wo에서 도달하였기 때문에

 

다음 글자이인 rld는 줄바꿈이 되어서 다음 줄에 출력이 되는 것 입니다.

 

 

2.텍스트의 길이가 길면 단어로 끊어서 줄바꿈 하는 경우(wrapMode 속성)

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"
       
        //wrapMode:Text.WrapAnywhere
        wrapMode:Text.WordWrap //텍스트를 단어 기준으로 끊어서 
        font.pixelSize: 30
        Rectangle
        {
            anchors.fill: parent
            border.color:"green"
            color:"transparent"
        }
    }   
 
    Button
    {
        x:360
        y:50
        width:100
        height:100
 
    }
}
 
 
 
 
 
 
 
 

위의 코드를 보시면 text의 wrapMode 속성에 Text.WordWrap 값을 넣었습니다.

 

첫번째 경우와 두번째 경우를 비교하면 두번째 경우는 World라는 단어가 text width에 도착하니 

 

world라는 단어 자체를 다음줄로 옮겨주었습니다. 속성하나를 어떻게 설정해주는지에 따라

 

위의 결과화면 처럼 결과가 달라집니다.

 

이렇게 실습을 해보다 보면 텍스트의 길이가 엄청 길어서 텍스트의 스크롤이 필요한 경우가 있습니다.

 

이런 경우는 어떻게 구현해야하는지 아래 내용에서 보겠습니다.

 

 

3.텍스트의 길이가 엄청 길어서 스크롤이 필요한 경우(Flickable type)

 

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")
    Flickable
    {
        x:50
        y:50
        width:300
        height:100
        contentHeight: text.height < text.contentHeight ? text.contentHeight : text.height
        //contentHeight란 실제 높이다. 즉 id가 text인 객체의 contentHeight는 text길이 만큼 
        //줄바꿈이 되어서 나온 전체 길이 이다.
 
        clip: true
        Text
        {
            id:text
            width:300
            height:100
            text: "Hello World Hello
            World Hello World Hello World
            Hello World Hello World Hello
            World Hello World Hello World Hello World Hello World Hello World"           
            wrapMode:Text.WrapAnywhere
            font.pixelSize: 30
        }
        Rectangle
        {
            anchors.fill: parent
            border.color:"red"           
            color:"transparent"
        }
    }
    Button
    {
        x:360
        y:50
        width:100
        height:100
    }
}
 
 
 
 

이번 실습에는 어려운 내용 들이 많이 들어갔습니다. contentHeight랑 flickable객체등

 

Flickable객체는 이 객체 파생된(자녀) 객체들을 스크롤이 가능하게끔 만들어주는 역확을 합니다.

 

Flickable객체는 이번 포스팅에서는 코드만 소개하고 사용방법은 추후에 포스팅 하겠습니다.

 

실행화면을 보면 위의 빨간 영역에서 스크롤이 가능하고 밑에 생량된 부분이 스크롤하게되면 보여지게 됩니다.

 

위 코드에서 contentHeight란 텍스트의 실제 높이 입니다. 즉 텍스트가많아서 줄바꿈이 많이 되었을때

 

줄바꿈이 된 만큼의 높이가 contentHeight 입니다.

 

contentHeight는 아래 코드와 실행 이미지를 참고하면 이해가 쉽습니다.

 

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")
 
    Flickable
    {
        x:50
        y:50
        width:300
        height:100
        contentHeight: text.height < text.contentHeight ? text.contentHeight : text.height
        //contentHeight
        //clip: true
        Text
        {
            id:text
            width:300
            height:100
            text: "Hello World Hello World Hello World Hello World 
            Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World"           
            wrapMode:Text.WrapAnywhere           
            //wrapMode:Text.WordWrap
            font.pixelSize: 30
            Rectangle//id가 text인 객체의 실제 높이를 초록색으로 그려줌
            {               
                width:text.contentWidth               
                height:text.contentHeight
                border.color:"green"               
                color:"transparent"
            }
            Rectangle//id가 text인 객체의 설정한 높이를 으로 그려줌
            {
                anchors.fill:parent
                border.color:"red"               
                color:"transparent"
            }
        }
 
    }
 
    Button
    {
        x:360
        y:50
        width:100
        height:100
    }
}
 
 
 
 

위의 실행 이미지를 보면 빨간색이 text에 설정한 높이 값이고 초록색이 text의 실제 높이 값입니다.

 

위의 이미지를 보면 contentHeight의 개념이 어떠한 것인지 잘 알수 있습니다.

 

contentHeight는 텍스트가 길어서 줄바꿈했을때의 동적인 높이이기 때문에 텍스트의 실제 길이라고 말할수 있습니다.

 

그래서 3번째 예제처럼 텍스트의 실제 높이만큼 스크롤이 가능하고 스크롤 했을때 아래의 내용이 보여지게끔 

 

구현할수 있습니다.

 

 

이번 시간에는 현업에서 많이쓰는 텍스트 줄바꿈과 텍스트 길이가 아주크면 스크롤이 가능하게끔하는

 

예제를 실습해 보았는데요.  다음 시간에는 텍스트의 글자체 및 글자 폰트등을 설정하는 내용을 포스팅 하겠습니다.

 

막상 QML의 기본이 text에 대해 설명하는데 예제가 조금 어려웠네요 다음 내용에서는 쉬운 예제로 

 

포스팅을 하겠습니다. 감사합니다.!