백곡시스템

GUI(QT) Programming

https://wiki.ubuntu-kr.org/index.php/GUI(QT)_Programming

QT란 무엇인가?[편집]

  • 리눅스나 유닉스에서 X-Window용 프로그램을 개발하려면 많은 지식이 필요하다.
  • 다음과 같은 특징이 있다.
  1. C++ 기반 – 고급 언어들에 비해 어느정도 속도도 나오고, C에 비하면 좀더 모듈화가 되어 있어 확장이 용이
  2. 객체지향 – 라이브러리들이 모듈화가 잘 되어 있음
  3. 멀티플랫폼 – 다양한 플랫폼을 지원하고, 플랫폼이 바뀐다고 해서 전체를 싹 갈아엎지 않아도 된다.
  4. 시그널 & 슬롯 – 이벤트 처리 모델이 정형화되어 있다. 즉, 시그널 & 슬롯만 알면 콜백함수 등 실수할 여지가 줄어든다.
  5. Internationalization – 16비트 유니코드 완벽지원.
  6. API – 200개가 넘는 클래스를 지원한다. 웬만한 프로그램은 QT 안에 있는 라이브러리들로 해결 가능.
  7. 안정성 – 기업 베이스다. 개발은 아무나 할 수 있지만 커밋은 기업 내에서 이루어진다. 일반적으로 산으로 가는 프로젝트를 만들지 않는다.

QT 프로그램 구경하기[편집]

Qt 1 install.png

  • 새 프로젝트(New Project)를 선택하면 다음과 같은 화면이 나온다.

Qt 1 new.png

  • 위젯 어플리케이션을 선택하면 다음과 같은 화면이 나온다.
  • 프로젝트 이름을 정하고 컴파일 키트를 선택한다.
  1. 프로젝트 이름은 임의로 작성하고, 컴파일 키트는 기본 옵션으로 설정하면 된다.
  • 클래스 설정 화면은 다음과 같다.
  1. Base Class를 다음과 같이 QDialog로 변경한다.

Qt 1 new 1.png

  • Github 등을 사용한다면 본인 계정 등을 설정하도록 한다. 이 내용은 QT/Github 항목을 참조.
  • 여기서는 그냥 버전컨트롤 없이 진행해도 상관없다.
  • Form에 *.ui 를 더블클릭하여 선택하면 다음과 같이 디자이너 모드로 변경된다.
  • 어디서 많이 보던것 같지 않은가? Visual Studio의 편집 화면과 비슷하다. Microsoft Visual Studio를 사용해본 경험이 있다면 거의 비슷하게 사용할 수 있다.

Qt 1 newWin 0.png

  • 자, 이제 버튼과 텍스트박스를 집어넣어봅시다.
  • 왼쪽에 있는 컴포넌트에서 드래그해서 넣을 수 있다.

Qt 1 Intro 0.png

  • PushButton의 이름을 바꾸는건 간단하다. PushButton 항목을 선택하고, 오른쪽 속성창의 값을 변경해주면 끝.

Qt 1 Intro 1.png

  • 화면 구성을 했으니 버튼에 이벤트를 넣어봅시다.
  1. 인사하기에서 우클릭을 하고 Go to Slot을 선택합니다.

Qt 1 Intro 2.png

  1. Go to Slot을 선택하면 다음과 같은 내용이 나옵니다.

Qt 1 Intro 2 1.png

  1. Clicked를 선택하면 코드 입력 부분이 나오는데, 다음과 같이 입력합니다.
  1. 지우기 부분 코드
  1. 종료하기 부분 코드

기본 문법[편집]

변수와 상수 사용하기[편집]

Qt 1 pro 0.png

  • C++의 경우 변수를 사용하기 위해서는 선언을 해야 합니다. 일반적으로 헤더파일에 선언을 하죠. 여기서는 data라는 변수를 추가해 보겠습니다.
  • 또한, 값을 확인하기 위한 디버그 모듈을 사용할 것입니다.
  • 헤더에 QDebug를 사용한다고 선언하고, 정수형 data를 미리 선언합니다.

Qt 1 pro 1.png

  • 그리고, 다이얼로그가 열릴 때 처리될 수 있도록 다음과 같이 코드를 넣어주면 됩니다.
  • qDebug() 함수를 사용할 때, 앞에 q는 소문자임에 유의해 주세요. qDebug() 함수는 c++의 cout과 같은 기능을 한다고 보시면 됩니다.
  • 실행하면 아래 디버그 창에 값이 출력되는걸 확인할 수 있습니다.

Qt 1 pro 2.png

  • 여기서 사용된 data는 사용자가 임의로 만들 수 있는 변수입니다. 변수는 프로그램 내에서 숫자나 문자 등을 보관하는 역할을 합니다.
  • 변수는 필요에 따라 얼마든지 만들어 사용할 수 있습니다.
  • = 기호는 수학의 등호가 아닙니다. 오른쪽의 값을 왼쪽의 변수에 기억시키는 (또는 할당하는) 연산자입니다.
  • 위의 프로그램에서 data 변수는 처음에 100을 기억했다가 다시 200을 기억합니다.
  • 이와 같이 변수는 다른 값을 가질 수 있습니다. 그래서 변수입니다.
  • 그에 반해 100이나 200같은 숫자는 상수라고 합니다. 이 숫자들은 프로그램이 아무리 실행되어도 항상 100과 200을 유지합니다. 그래서 상수입니다.
  • 이제 여러가지 형식의 변수를 선언하고 이용해보도록 하겠습니다.

Qt 1 pro 3.png Qt 1 pro 4.png

  • 정수형 변수 dataint는 정수를 기억합니다. 컴퓨터가 가장 빠른 연산을 할 수 있는 데이터형입니다.
  • 실수형 변수 datadou는 소수점 이하의 수를 기억합니다. 내부적으로는 지수 형태로 기억하지만, 일반적으로 소숫점이 있는 수를 저장할 때 많이 사용합니다.
  • 논리형 변수 databoo는 true와 false 논리 상수를 기억합니다. 일반적으로 flag같은 값을 많이들 저장합니다.
  • 문자열형 변수 datastr은 할당할 문자열을 반드시 겹따옴표 사이에 기술해야 합니다. 문자열은 문자의 집합을 의미합니다.
  • 변수의 종류를 말할 때 위와 같이 데이터형에 따라 정수형 변수, 실수형 변수, 문자열형 변수, …와 같이 구분합니다. 근데 또 다른 관점에서 구분하는 경우도 있습니다.
  • 변수가 영향을 미치는 유효 범위에 따라 다음과 같이 구분하기도 합니다.
  1. 프로시져 변수 – 프로시져(중괄호{}) 내부에 선언된 변수. 프로시져 안에서만 쓸 수 있다. 보통 지역변수라고들 많이 이야기한다.
  2. 모듈 변수 – 모듈(파일) 내부에 선언된 변수. 그 파일 안에서만 쓸 수 있다.
  3. 전역 변수 – 헤더파일에 Public으로 선언한 변수. 다른 모듈에서도 갖다 쓸 수 있다.
  4. 정적 변수 – 프로시져 내부에 Static으로 선언하는 변수. 프로시져가 종료되어도 값을 유지한다.
  • 이에 대해 알아보기 위해 간단하게 프로그램을 하나 작성해보도록 하겠습니다.

Qt 1 pro 5.png Qt 1 pro 6.png

  • 위와 같이 해놓으면 에러가 발생할 것입니다.
  • 이를 어떻게 해결하냐면, 이걸 헤더 내에 모듈 변수로 선언을 하면 됩니다.
  • 실행해보면 제대로 출력되는걸 볼 수 있을겁니다.

Qt 1 pro 7.png Qt 1 pro 8.png

  • const라는 게 있습니다.
  • 상수를 변수처럼 사용할 수 있게 만들어 주는거죠.
  • 예를 들어, 파이값같은걸 쓴다치면, 계속 3.1415926이라는 값을 입력하면 귀찮으니, pi라는 변수처럼 생긴 놈 안에다가 그 값을 넣어두는 겁니다.
  • const 선언을 하게 되면, 그 값을 바꿀 수 없습니다. Ansi-C에서는 #define이라는 전처리기(Preprocessor)를 사용했었는데, C++ 계열에서는 거의 대부분 const로 해결합니다. 이해도 쉽고, const를 쓰는게 좋습니다.

Qt 1 pro 9 .png Qt 1 pro 10 .png

연산자[편집]

  • 다음과 같이 연산자를 사용할 수 있다.

조건문[편집]

  • 1개의 조건문 예시
  • elseif 예시
  • switch 문은 일반적으로 enum과 함께 쓰입니다.
  • enum은 위와 같이 사용합니다. 자세한 사용법은 구글님께.

반복문[편집]

  • for는 다음과 같이 사용합니다.
  • 예제를 하나 보도록 하죠.
  • do~while문은 다음과 같이 사용합니다.
  • 이것도 역시 예제를 위의 for와 같은걸 해보도록 하죠.
  • 자, for문과 do~while문의 차이점은 뭘까요?
  1. for는 괄호 안에 모든 내용을 다 집어넣었지요? 사람들은 반복문을 사용할 때 for를 더 많이 사용하는 이유가 있지요.
  2. for는 루프 내에서만 사용되는 변수를 지정할 수 있습니다. while은 미리 변수를 선언해야 하고요.
  3. while은 또 한가지 유의할 점이 있습니다. *무조건* 한번은 프로시져가 실행된다는 점이죠.

배열[편집]

  • 프로그램에서 데이터를 임시로 저장하기 위해서 변수를 사용한다는건 아실겁니다.
  • 그런데 변수중에 ‘배열’이라는걸 들어보셨을거에요.그걸 왜 쓰는지 궁금하실겁니다.
  • 일단 ‘배열’이라는건 같은 데이터 타입을 가지는 변수의 ‘집단’이라고 할 수 있습니다.
  • 예를 들어 10개의 과목에 대한 점수를 기억하려면 다음과 같이 10개의 정수형 변수가 필요할 것입니다.
  • 보세요. 보기만 해도 선언도 귀찮고 기억하기도 힘들겠죠?
  • 근데, 이걸 100명분을 작성한다고 칩시다.
  • 이럴땐 다음과 같이 배열로 하면 좀더 쉽게 작성할 수 있습니다.
  • 예제를 하나 보죠.
  • 이런식으로 사용합니다. 다음은 1부터 10까지 돌면서 해당 값에 2를 곱해서 저장하는 프로그램입니다.
  • 실행 결과는 다음과 같을 것입니다.

Qt 2 script 0.png

  • 이걸 보고 이상하다는 생각이 들지 않나요?
  • 컴퓨터한테는 첫번째 숫자가 1이 아니라 0입니다.
  • 이걸 1부터 시작해서 10으로 끝나게 만들려면 어떻게 해야 할까요? 한번 고민해보고 만들어보시기 바랍니다. 🙂

동적 배열[편집]

  • 그런데 배열의ㅈㅈ습니다. (이거 뭐라고 하는지 모르겠으니 수정해주시면 감사하겠습니다.)
  • 타입 뒤에 *가 들어갑니다. 중요합니다.
  • 또한, 할당하고 나서 다음과 같이 꼭 해제를 해줘야 합니다.
  • 요즘 인기있는 언어들이 Garbage Collector를 포함하며, 인터프리터를 지향하고 있는 이유는 해제할 타이밍이 애매한 경우가 많아서입니다.
  • 하지만, 조금 크게 메모리를 할당하거나 하는 방법으로 메모리 해제 타이밍을 잡을 수 있습니다.
  • 또한 QT에서는 QT 데이터타입을 사용하면 내부적으로 Garbage Collector를 적용한다고 합니다.
  • 아무튼 예제를 하나 보도록 하겠습니다. 마찬가지로 위와 같은 프로그램입니다.

다차원배열[편집]

  • 지금까지 본건 1차원 배열입니다.
  • QT를 컴파일하는 gcc의 경우 10차원이 넘는 배열을 선언할 수 있습니다.
  • 간단한 프로그램을 작성해 봅시다.
  • 대충 무슨 프로그램인지 보이시지요?
  • 자 이걸 구구단으로 바꿔보세요.

구조체[편집]

  • 구조체는 다음과 같이 사용합니다.

함수[편집]

GUI 기초 및 응용[편집]

컨트롤[편집]

Layouts.pngSpacers.pngButtons.pngItem Views.pngItem Widget.pngContainers.pngInput Widget.pngDisplay Widget.png

프로그램을 작성하는 순서[편집]

  • 일반적으로 프로그램은 다음과 같은 순서로 작성합니다.
  1. GUI 구상 – 어떤 GUI를 만들 것인지 구상합니다.
  2. 객체 배치 – 컨트롤을 사용하여 객체들을 폼 위에 배치합니다.
  3. 속성 조절 – 속성창에서 조절할 필요가 있는 속성들을 지정합니다.
  4. 슬롯 선택 – 객체별로 필요한 슬롯을 선택하고 코딩을 합니다. 이때 프로그램에서 제어할 필요가 있는 속성은 객체->속성으로 지정하고, 객체->메소드나 함수, 명령문을 사용하여 객체의 이벤트를 완성합니다.
  5. 디버깅 – 실행을 하고 에러가 있으면 수정을 해서 다시 실행합니다.
  • 물론 이것이 정석적인 방법이라고 볼 수는 없겠습니다만, 일반적인 취향이라고 볼 수 있겠습니다.

컨트롤을 쉽게 배치하는 방법[편집]

  • 폼 위에 객체를 그리다 보면 동일한 객체를 여러개 그려야 하는 경우가 많습니다. 이들의 크기나 위치등을 하나씩 배치할수도 있겠으나, 우리는 도구를 쓰도록 합시다.

Qt 2 gui 0.png Qt 2 gui 1.png Qt 2 gui 2.png p;;;;;

QPushButton 컨트롤 사용하기[편집]

  • 버튼입니다. 프로그램 만들면 많이들 사용하는 컨트롤이죠.
  • 이 버튼은 대개 누르면 작업이 실행되게 하는 용도로 사용되죠.
  • Enabled라는 속성에 대해 좀 중점적으로 보시면 좋을듯 합니다.
  • 다음과 같은 프로그램을 만들어봅시다.

First Qt App.png

  • QPushButton 3개와 QLabel 1개를 배치해 봅시다.
  • 그리고 QPushButton에 Clicked 슬롯을 만들고 다음과 같이 작성해 줍니다.
  • 유의할 점은 void Dialog::on_pushButton_clicked() <- 이 부분은 직접 코딩하는게 아닙니다!!
  • 슬롯을 전부 만드시고 위와 같이 코드를 작성하셨다면 누른 버튼이 비활성화되는게 보이실겁니다.

QLineEdit 컨트롤 사용하기[편집]

  • 주로 주관식 데이터를 입력하기 위해 많이 사용하는 LineEdit 컨트롤을 지정해 봅시다.
  • 성적을 계산하는 프로그램인데, 텍스트상자를 이용해서 이름과 점수를 입력합니다.
  • 다음과 같은 프로그램을 만들 것입니다.

Qt App 2.png

  • Grid Layout을 이용하면 의외로 간단하게 화면 구성이 가능합니다.
  • 다음과 같이 그리드 레이아웃을 만들고 왼쪽에는 Label을, 오른쪽에는 LineEdit를 드래그해서 집어넣습니다.

Qt 2 drag drop 0.png Qt 2 drag drop 1.png Qt 2 drag drop 2.png

  • 그리고 버튼도 Horizontal Layout을 이용하면 쉽게 배열이 가능합니다.
  • 레이블과 버튼, 라인에디트를 배열하고 각각 속성에서 제목을 적어줍니다.
  • 헤더파일에 QDebug를 include하고, 다음과 같이 변수를 선언해 줍니다.
  • 각 버튼의 코드는 다음과 같습니다.
  • 실제 입력에 따라 다음과 같이 결과가 출력되는걸 볼 수 있습니다.

결과 나오는 화면 Qt App 2 Result.png

QCheckBox 컨트롤 사용하기[편집]

  • 체크박스는 체크 표시된 항목을 선택하는 기능을 제공합니다.
  • 아마도 웹사이트에서 많이 보셨을겁니다.
  • 이것의 특징은, 라디오버튼과 달리 여러개의 항목을 동시에 선택할 수 있다는 겁니다.
  • 남자가 결혼하기 전에 사야 할 물품을 정리해 보았습니다.
  • 폼에 판매 품목과 가격을 체크상자로 표시하고, 소비자가 상자를 선택하고 총액계산 버튼을 누르면 텍스트 상자에 총액이 표시되도록 하는것이 목표입니다.

실행 화면

Checkbox result.png

  • 헤더에 변수를 하나 선언합니다.
  • 위 폼은 쉽게 만들 수 있을것이라 생각하고, 각 버튼의 코드는 다음과 같습니다.
  • 체크버튼을 누르면 바로 적용되도록 만들 수 있을 것입니다.
  • 이건 직접 해보시는게 어떨까요?

QRadioButton 컨트롤 사용하기[편집]

  • 라디오버튼은 옵션 버튼이라고도 합니다.
  • 체크 상자와 비슷하게 항목을 선택할 때 사용되지만, 옵션 버튼은 여러개 중에서 한개만 선택할 수 있는데에 많이 사용됩니다.
  • 체크버튼가지고도 코드 부분을 좀 수정하면 라디오버튼과 같은 동작을 하게 만들수 있습니다.
  • 특정 버튼을 선택했다가 다른 버튼을 선택하면 이전에 선택했던 버튼의 체크표시는 지워집니다.
  • 아래 프로그램을 한번 만들어 보도록 하겠습니다. 라디오버튼과 체크버튼을 같이 쓰니까 비교하기가 쉬울겁니다.

Qt 3 result 0.png

  • 자신의 연령대를 선택하고 연애인을 선택한 후 결과보기 버튼을 누르면 텍스트 상자에 결과가 표시됩니다.
  • 다시보기 버튼을 누르면 내용이 싹 지워져서 새로 선택하기 편하도록 편의성을 높였습니다.
  • 헤더에 추가할 코드는 다음과 같습니다.
  • 소스코드에 추가할 내용입니다. PushButton에 슬롯으로 작성하는건 이제 다들 익숙해지셨으리라 생각합니다.

QGroupBox[편집]

  • 그룹박스는 다른 객체들을 묶는 역할을 합니다.
  • 다른 여러 프로그램상에서 많이들 보셨을겁니다.
  • 이건 말보다 프로그램을 직접 보시는게 나을듯.

실행화면

QGroupBox 1.png

QGroupBox 2.png

  • 보시면 2개의 그룹박스를 사용하고 있습니다.
  • PC 보유현황과 주변장치현황이 프레임입니다.
  • 나머지 내용은 위의 QRadiobutton강좌와 같다고 보시면 됩니다.
  • 헤더에는 변수를 선언해 줍니다.
  • 다음은 버튼에 관한 코드입니다.

QListWidget[편집]

  • ListWidget 컨트롤은 상자 안에 항목들을 나열하는 기능을 제공합니다.
  • 이거랑 ComboBoxWidget이 목록을 제공하는 대표적인 컨트롤입니다.
  • ListWidget은 여러개의 항목 선택을 할 수 있도록 되어 있으며, Shift나 Ctrl등을 이용해서 선택할 수 있도록 되어 있습니다.

Listwidget result.png

  • 코드는 매우 간단합니다.

QComboBox[편집]

  • 콤보박스 컨트롤은 펼침 목록 기능을 제공합니다.
  • 웹사이트를 방문해보면 주소 입력하는데 대부분 이거 씁니다.
  • 프로그래밍에서도 종종 씁니다.
  • ListWidget과 사용법은 비슷합니다.

결과화면

Combobox result.png

  • 이번에는 버튼을 만들지 않고, 콤보박스의 내용이 변경되는 즉시 반영되도록 해봅시다.
  • 슬롯 선택시 다음과 같이 선택하세요.

Combobox slot.png

  • 코드는 다음과 같습니다.

Slider & Dial[편집]

  • 슬라이더를 봅시다.
  • 각각의 슬라이더의 값 변화에 따라 레이블도 변화하도록 해봅시다.
  • Dial은 꼭 옛날 전축에 있던거랑 비슷하게 생겼지요?

결과화면

Sliders result.png

  • 슬롯 하나하나마다 다음과 같이 슬롯을 작성하고

슬롯 선택

  • 코드는 다음과 같이 작성하면 된다.

QTimer[편집]

  • 타이머는 시간과 관련된 컨트롤입니다.
  • 다음과 같이 시계를 만들어 보도록 하겠습니다.

실행화면

Clock result.png

  • 시계는 코드에 직접 작성해 주어야 합니다.
  • 헤더파일에 QTimer와 QDateTime을 include해줍니다.
  • QTimer는 타이머고, QDateTime은 현재시각을 받아오기 위해 사용합니다.
  • private:에 timer를 하나 선언하고, private slots:에 tupdate() 함수를 등록해 줍니다.
  • 프로그램이 실행되면서 타이머가 동작하도록 아래의 코드를 메인 위젯 안에 넣어줍니다.
  • 그리고, tupdate() 함수를 다음과 같이 작성합니다.

QFileDialog[편집]

  • 파일 컨트롤은 파일을 선택하거나, 파일을 저장할 때에 많이 사용되는 컨트롤입니다.
  • 이건 기본 컨트롤엔 없으나, 사용 빈도가 굉장히 높습니다.

실행화면

File result.png

  • 파일 다이얼로그를 사용하기 위해서는 QFileDialog를 include해야 합니다.
  • 그리고 버튼에 대한 코드는 다음과 같습니다.
  • 파일 컨트롤도 참 쉽죠?
  • 속성도 지정할 수 있습니다. png 파일만 연다든지.. 이 부분은 직접 해보세요 🙂

QGraphicsView[편집]

  • GraphicsView는 각종 도형, 텍스트 등을 좀 더 유연하게 사용할 수 있도록 만들어진 Canvas같은 개념의 컨트롤입니다.
  • 단독으로는 아무것도 할 수 없고, GraphicsScene과 함께 동작합니다.
  • 그림파일을 하나 불러와 보여주는 프로그램을 작성해 보겠습니다.

Qt graphic result.png

  • 헤더파일의 수정은 다음과 같습니다.
  • 소스코드입니다.
  • 실행파일과 같은 디렉토리에 hello.png (png 파일 아무거나 넣어보세요)가 있다면 그 그림파일이 출력될 것입니다.
  • 과제 : 전에 배운 FileOpenDialog를 이용해서, 파일을 선택해 보여줄 수 있도록 만들어 봅시다.

QTabWidget[편집]

  • 탭 컨트롤에 대해 알아보겠습니다.
  • 보통, 설정같이 내용은 많고, 각각의 성격에 따라 분류하고 싶을 경우 많이들 사용합니다.
  • 코드로 작성하기보다는 일반적으로 디자인에서 다 하는 경우가 많습니다.

Settings-ss00.png

QProgressBar[편집]

  • 프로그레스바에 대해 알아보도록 하겠습니다.
  • 가짜로 만든 로딩바 입니다.

Progressbar-ss00.png

  • 헤더는 다음과 같습니다
  • 소스코드는 다음과 같습니다.