해커를 꿈꾸는 개발자

QT qml의 listview을 이용하여 간단한 리스트 표시하기 - hightlight 포함

listview component는 리스트에 넣을 데이터(model)와 각 리스트 아이템을 어떻게 표시할지에 대한 델리게이트(Delegate)가 꼭 필요합니다. 또한 mouse 클릭한 것에 따라 focus가 변경되는 것을 구현해 봅시다. 

데이터(model) 정의

model은 ListModel component로 생성합니다. 

각각의 리스트 아이템은 ListElement로 정의하였고,

과일과 가격을 표시하도록 하기 위해, name과 price 변수를 생성해 값을 지정하였습니다. 

    ListModel {
         id:listmodel
         ListElement {
             name: "Apple"
             price: "1000"
         }
         ListElement {
             name: "Banana"
             price: "2000"
         }
         ListElement {
             name: "Grape"
             price: "3000"
         }

         ListElement {
             name: "Peach"
             price: "4000"
         }

         ListElement {
             name: "Lemon"
             price: "5000"
         }
     }

델리게이트(Delegate) 정의

델리게이트(Delegate)는 리스트의 각각의 아이템을 어떻게 표시할지를 다룹니다. 

여기에서는 각 리스트 아이템의 높이는 40으로 넣었고, 과일 이름과 가격을 표시하도록 하였습니다. 

또한, Mouse 클릭을 하면 listView의 현재 아이템이 몇번째인지에 대한 currentIndex 변수에 index를 넣도록 하였습니다.

    Component {
        id:listDelegate
        Item {
            width: parent.width
            height: 40
            Column {
                Text { text: 'Name:' + name }
                Text { text: 'Price:' + price + ' won'}
            }
            MouseArea {
                anchors.fill: parent
                onClicked: list.currentIndex = index
            }
        }
    }

하이라이트(Highlight) 정의

리스트의 아이템에 Focus 처리를 하기 위해, 하이라이트를 정의하였습니다. 

배경은 회색으로 표시하도록 하였고, 마우스로 클릭한 아이템의 과일 이름 문구를 표시하도록 하였습니다.

문구의 색상은 흰색으로 표시하도록 하였습니다.  

    Component{
        id : listhightlight
        Rectangle {

            color: 'grey'
            Text {
                anchors.centerIn: parent
                text: 'Hello ' + listmodel.get(list.currentIndex).name
                color: 'white'
            }
        }
    }

전체코드

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    width: 640
    height: 480
    visible: true

    ListModel {
         id:listmodel
         ListElement {
             name: "Apple"
             price: "1000"
         }
         ListElement {
             name: "Banana"
             price: "2000"
         }
         ListElement {
             name: "Grape"
             price: "3000"
         }

         ListElement {
             name: "Peach"
             price: "4000"
         }

         ListElement {
             name: "Lemon"
             price: "5000"
         }
     }

    Component {
        id:listDelegate
        Item {
            width: parent.width
            height: 40
            Column {
                Text { text: 'Name:' + name }
                Text { text: 'Price:' + price + ' won'}
            }
            MouseArea {
                anchors.fill: parent
                onClicked: list.currentIndex = index
            }
        }
    }

    Component{
        id : listhightlight
        Rectangle {

            color: 'grey'
            Text {
                anchors.centerIn: parent
                text: 'Hello ' + listmodel.get(list.currentIndex).name
                color: 'white'
            }
        }
    }

    ListView {
        id: list
        anchors.fill: parent
        model: listmodel
        delegate:listDelegate
        highlight:listhightlight
        focus: true
        onCurrentItemChanged: console.log(model.get(list.currentIndex).name + ' selected')
    }
}

QT qml의 TextField, Button을 이용한 문구 출력

QML을 이용해 GUI 프로그램을 만들기 위해 프로젝트 생성은 아래 링크를 참고하시면 됩니다.

https://zidarn87.tistory.com/9?category=415008 

Button을 눌렀을 때 TextField에 입력된 text를 label에 업데이트하는 것을 구현해 봅니다.

Qt의 Cpp 쪽으로 데이터를 보내지 않고, qml에 내에서만 코드를 작성해 볼게요.

"Name : " 문구를 표시한 Label과 TextField로부터 받아온 문구를 표시할 Label을 생성하였습니다. 

displayname Label의 위치는 namelabel의 아래 쪽에 위치하도록 하였습니다.  

    Label{
        id : namelabel
        x: parent.x
        font.pointSize: 20
        text : "Name : "
    }

    Label{
        id : displayname
        y: namelabel.height + 30
        font.pointSize: 20
        text : "No input"
    }

text를 입력받을 TextField를 생성하였습니다. 

위치는 namelabel의 오른쪽에 위치하도록 하였습니다. 

    TextField {
        id:textfield
        x:namelabel.width
        width: 200
        placeholderText: qsTr("Enter name")
        font.pointSize: 20
    }

Buttom 컴포넌트를 생성하였습니다. 

위치는 textfield의 오른쪽에 위치하도록 하였고, button을 클릭하였을 때, displayname Label의 문구를 업데이트 하도록 구현하였습니다. 

    Button{
        x: textfield.x + textfield.width + 10
        text: "Button"
        onClicked: buttonClickProcess()

        function buttonClickProcess(){
            displayname.text = "my name is " + textfield.text
        }
    }

전체 qml의 코드는 아래와 같습니다. 

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("First Program")

    Label{
        id : namelabel
        x: parent.x
        font.pointSize: 20
        text : "Name : "
    }

    Label{
        id : displayname
        y: namelabel.height + 30
        font.pointSize: 20
        text : "No input"
    }

    TextField {
        id:textfield
        x:namelabel.width
        width: 200
        placeholderText: qsTr("Enter name")
        font.pointSize: 20
    }

    Button{
        x: textfield.x + textfield.width + 10
        text: "Button"
        onClicked: buttonClickProcess()

        function buttonClickProcess(){
            displayname.text = "my name is " + textfield.text
        }
    }
}

승리의 확신 / 고린도전서 10장 13절

사람이 감당할 시험 밖에는 너희가 당한 것이 없나니 오직 하나님은 미쁘사

너희가 감당하지 못할 시험 당함을 허락하지 아니하시고 

시험 당할 즈음에 또한 피할 길을 내사 너희로 능히 감당하게 하시느니라

No temptation has seized you except what is common to man. And Goid is faithful;

he will not let you be tempted beyond what you can bear.

But when you are tempted, he will also provide a way out so that you can stand up under it.

QT - Widget, Console, Quick 프로젝트 생성하여 Hello world 출력하기

1. Qt Widgets Application으로 Hello world 출력하기

Qt Widgets Application을 만들고 계속 Next를 누른다.

프로젝트를 생성하면 아래와 같이 파일이 생성된다.

Test1.pro : project에 대한 정보를 가지고 있음

main.cpp : 프로그램 진입점

mainwindow.h / mainwindow.cpp : 위젯

mainwindow.ui : ui 디자인 파일이고, 실제로는 xml 파일 형식으로 되어 있다. 

main.cpp

QApplication과 MainWindow를 생성하고, 윈도우를 표시한다.

mainwindow.h / mainwindow.cpp

QMainWindow를 상속한 MainWindow 클래스에서 widget을 만든다.

mainwindow.ui 

디자인 도구를 사용하여 Hello World! 를 찍도록 Label을 추가한다.

코드를 빌드하여, RUN하면 아래와 같이 Hello world!가 출력된다. 

2. Qt Console Application으로 Hello world 출력하기

Qt Console Application으로 프로젝트를 생성하면, 프로젝트 정보를 담고 있는 pro 파일과 main.cpp만 생성된다.

간단하게 printf만 작성하여 hello world!를 출력해보자.

#include <QCoreApplication>

int main(int argc, char *argv[])
{
    QCoreApplication a(argc, argv);
    printf("hello world!");

    return a.exec();
}

빌드하고 실행하면 아래와 같이 Console로 출력된다.

3. Qt Quick Application - Empty 로 Hello world 출력하기

프로젝트가 생성되면, 프로젝트 정보를 가지고 있는 pro 파일과 main. cpp 그리고 main.qml 파일이 생성된다. 

main.qml에 hello world!를 출력할 Label을 생성하여, 문구를 출력해 본다.

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("First Program")

    Label {
        id: hello
        text: "Hello world!"
        color: Black
    }
}

실행해보면 아래와 같이 출력된다. 

Widget, Console, Quick 프로젝트를 생성하고, 간단하게 hello world를 출력해 보았다.