[C++,QT/Qml]4. Qml 프로그래밍 text 사용하기 3(텍스트 속성 설명,custom type 만들기)

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

(텍스트 속성 설명,custom type 만들기)

 

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

 

오늘 포스팅에서는 QML텍스트 속성에 대해서 알아보겠습니다.

 

프로그램에 텍스트를 넣을때 사용자가 원하는 스타일이 있을수도 있습니다.

 

예를들어 폰트는 어떻게 해야하고 글자 크기는 어떻게 해야하는지 등 고려해야 하는 부분이 많습니다.

 

그런데 텍스트를 설정할때마다 폰트를 항상 지정하게되면 코드길이도 길어지고 여러가지 기본으로 적용해야하는 

 

속성들을 텍스트를 만들때마다 넣게되면 코드길이가 많이 길어지겠죠??

 

그래서 이번 시간에는 간단하게 텍스트 속성 설명등을 하고 여러 속성들을 하나로 정의해서 그 타입들을 가져와서 

 

사용하는 방법을 설명 드리겠습니다.

 

1. 폰트 설정 및 글자 볼드체 설정 방법

 

QML에서 폰트설정은 font.family라는 속성을 사용 하면 됩니다. 

 

그리고 볼드체 설정 방법은 font.bold속성을 사용 하면 됩다. 

 

qml text정리 문서 사이트에 가보면 font.bold는 bool로 설정기 가능하고 font.family를 string값으로 

 

사용자가 원하는 폰트를 설정해주면 됩니다.

 

아래 내용을 보겠습니다.

 

 

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
    {
        id:text
        width:300
        height:100
        text: "Hello World Hello World Hello World Hello World"
        wrapMode:Text.WrapAnywhere
        font.bold: true
        font.pixelSize: 30
        Rectangle
        {
            anchors.fill: parent
            border.color:"red"            
            color:"transparent"
        }
    }
}
 
 
 
 

 

bold적용 안한 사항

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
    {
        id:text
        width:300
        height:100
        text: "Hello World Hello World Hello World Hello World"
        wrapMode:Text.WrapAnywhere
        //font.bold: true
        font.pixelSize: 30
        Rectangle
        {
            anchors.fill: parent
            border.color:"red"            
            color:"transparent"
        }
    }
}
 
 
 
 

 

bold체 적용 안한 이미지

위의 코드는 bold체를 적용한 사항이고

 

아래의 코드는 bold체를 적용 안한 사항입니다.

 

실행 내용만 봐도 확실히 다른 것을 알수 있습니다.

 

2. text Custom타입 만들기

 

Custom 타입 만들기는 아주 중요한 내용 입니다.

 

text말고도 여러가지 타입들을 custom타입으로 만들게되면 그 객체를 불러오는 것만으로

 

custom타입을 사용할수 있기때문에 text이외에에도 여러가지를 만들어서 사용하는 편입니다.

 

대표적으로는 image가 포함된 button이나 리스트뷰의 스크롤바 등에 많이 쓰입니다.

 

스크롤바는 리스트 뷰 속성에 있긴한데 기본 속성을 사용하게되면

 

사용자가 원하는 스크롤바를 만들기가 어렵습니다.

 

그래서 왠만하면 custom스크롤바를 구현해서 사용하고 있습니다.

 

그래서 text Custom타입만들면 다른것도 응용해서 만들수 있기 때문에 text custom 타입을 만들어 보겠습니다.

 

1. 현재 qml작업 파일의 경로에서 마우스 왼쪽 클릭을 해서 Add New버튼을 누른다.

2. 추가할 파일을 선택한다. 저희는 custom타입을 만들어야 하기때문에 qml파일을 추가해 줍니다.

3. 파일 이름을 설정한다. 각 타입들은 이름 첫글자가 무조건 대문자여야 합니다. 그래서 CustomText라고 만들겠습니다.

 

4. 파일을 어떤 프로젝트에 추가할지를 선택해 줍니다.

5. 추가한 파일을 확인하고 아래와 같이 코딩을 해줍니다.

 

 
import QtQuick 2.0
 
Item
{
    id:customtext
    property rect rTextGeometry // 위치를 지정하기위한 rect 변수 추가
    property alias text: text.text // text의 글자를 넣기위한 변수 추가
    property bool bold: true //text bold를 설정하기 위한 변수 추가 기본값은 bold체
    property var pixelSize: 30 //text 사이즈를 설정하기 위한 변수 추가 기본값은 30
 
    Text {
        anchors.fill: parent
        id : text
        text: ""
        font.bold: bold  //텍스트의 bold에 변수값로 지정해서 개발자가 지정한 값으로 설정이 가능하게 함
        font.pixelSize: pixelSize // 텍스트의 사이즈를 변주값으로 지정해서 개발자가 지정한 값으로 크기를 설정
    }
 
    onRTextGeometryChanged: //qml 에서는 전역변수를 설정하면 전역변수가 변경되었을때의 시그널을 받을 수 있습니다.
                            //그래서 rTextGeometry  전역변수가 변경 되면 onRTextGeometryChanged 가 호출이 됩니다.
 //(아주 중요)
    {
        customtext.x = rTextGeometry.x  //사용자가 지정한 위치를 설정해줍니다.
        customtext.y = rTextGeometry.y
        customtext.width = rTextGeometry.width
        customtext.height = rTextGeometry.height
    }
}
 
 
 

이부분은 조금 어려운 내용 입니다.

 

위의 코드에 설명과 같이 QML에서는 전역 변수가 변경이되면 시그널을 발생하는데 그것을 받는 slot은

 

위의 onRTextGeometryChanged입니다. 각 전역 변수 설정한 이름에 따라 모두 다릅니다.

 

위와같이 코딩을 하게되면 rTextGeometry  값이 바뀌면 onRTextGeometryChanged 이 호출이 되어서

 

위치좌표를 설정해주게 됩니다.

 

이 시그널은 Changed 시그널 말고도 여러가지가 있어서 추후에 다른 시그널을 사용할때마다 

 

설명 드리겠습니다.

 

여기서 alias는 별명을 지정하는 것으로  id가 text인 타입의 text속성을 text로 지정해준다는 것입니다.

 

그래서 alias의 text에 값을 넣으면 text타입의 text속성에 값을 넣는 것과 같은 것 입니다.

 

위와같이 코딩을 해주면 위의 customText객체를 추가할때마다 bold체에 textsize가 30인 텍스트를

 

계속 만들어 줄수 있습니다. 즉 위의 속성외에도 다른 속성들을 추가해주면 추가한 속성들을 기본으로 가지고있는 

 

text타입들이 만들어진다는 것입니다.

 

Custom 타입을 불러오는 방법은 아래 내용을 보시면 됩니다.

 

import QtQuick 2.9
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import "."
 
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")   
    Text
    {
        id:text
        width:300
        height:100
        text: "Hello World Hello World Hello World Hello World"
        wrapMode:Text.WrapAnywhere
        //font.bold: true
        font.pixelSize: 30
        Rectangle
        {
            anchors.fill: parent
            border.color:"red"
            color:"transparent"
        }
    }
    CustomText
    {
        id:customtext1
        rTextGeometry: Qt.rect(0,150,300,100)
        text:"cutomtext1"
    }
    CustomText
    {
        id:customtext2
        rTextGeometry:Qt.rect(0,300,300,100)
        text:"cutomtext2"
        bold:false
    }
}
 
 
 

 

 

위의 코드와 같이 현재 디렉토리를 import시켜줍니다.

 

그리고 위의 코드와 같이 CustomText 타입을 일반 타이을 가져오는 거와 같이 가져와 줍니다.

 

CustomText의 변우세 rTextGeometry와 같은 변수들을 선언해 줍니다.

 

첫번째 CustomText에는 bold를 기본값으로 하였고 두번째 CustomText에는 bold를 false로 적용하였습니다.

 

아래는 실행 결과 이미지 입니다. 차이를 보시면 위에는 bold체가 적용되고 아래는 blod체가 적용이 안되었습니다.

 

 

이런식으로 custom타입을 만들어서 필요할때 구현해서 쓰면 코드양도 줄고 필요할때마다 호출해서 custom화된

 

객체들을 사용할수가 있습니다.

 

현업에서는 이 객체들을 여러개 만들어서 버튼이나 listview의 커스텀 스크롤 뷰를 만들때 사용합니다.

 

custom버튼과 custom스크롤 뷰는 추후 포스팅에서 설명 드리겠습니다.

 

여기까지 QML의 기본인 text에대해서 알아보았습니다.

 

막상 필자는 기본이라고 올렸지만 내용은 그리 간단 하지도 않고 심화된 부분이 많이 포함이 된것 같네요(custom타입등)

 

다음 포스팅에는 이미지 출력하는 방법에 대해서 포스팅 하겠습니다.

 

감사합니다.!