GUI(QT) Programming

깊이있는 삽질 Ubuntu Korea Community Wiki
이동: 둘러보기, 검색

QT란 무엇인가?[편집]

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

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를 선택하면 코드 입력 부분이 나오는데, 다음과 같이 입력합니다.
ui->lineEdit->setText("Hello World");
  1. 지우기 부분 코드
ui->lineEdit->setText("");
  1. 종료하기 부분 코드
this.close();

기본 문법[편집]

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

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같은 값을 많이들 저장합니다. 근데 왜 64비트나 처먹어
  • 문자열형 변수 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

연산자[편집]

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

data1 = 10;
data2 = 3;

// 산술 연산
qDebug() << "data1 + data2 = " << data1 + data2;
qDebug() << "data1 - data2 = " << data1 - data2;
qDebug() << "data1 * data2 = " << data1 * data2;
qDebug() << "data1 / data2 = " << data1 / data2;
qDebug() << "data1 % data2 = " << data1 % data2;

// 논리 연산
qDebug() << QString("(data1 < 11) && (data2 > 2) = %1").arg((data1 < 11) && (data2 > 2));
qDebug() << QString("(data1 < 11) || (data2 < 2) = %1").arg((data1 < 11) || (data2 < 2));
qDebug() << QString("!(data1 < 11) = %1").arg(!(data1 < 11));

조건문[편집]

if(조건식) { 명령문; }
  • 1개의 조건문 예시
int jumsu;

jumsu = 50;

if(jumsu < 60)
{
  qDebug() << "낙제입니다";
  qDebug() << "재수강 신청하세요";
  qDebug() << "마감일은 12월 20일입니다";
}
else
{
  qDebug() << "낙제가 아닙니다";
  qDebug() << "재수강 신청하지 마세요";
  qDebug() << "마감일 신경쓰지 마세요";
}
qDebug() << "점수는 " << jumsu << "점 입니다.";
  • elseif 예시
int jumsu;

jumsu = 50;

if(jumsu >= 90)
{
  qDebug() << "A 학점입니다.";
}
else if(jumsu >= 80)
{
  qDebug() << "B 학점입니다.";
}
else if(jumsu >= 70)
{
  qDebug() << "C 학점입니다.";
}
else if(jumsu >= 60)
{
  qDebug() << "D 학점입니다.";
}
else // elseif가 아님
{
  qDebug() << "F 학점입니다.";
}
  • switch 문은 일반적으로 enum과 함께 쓰입니다.
enum weekday {
    Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
};

int today, yesterday;

today = Saturday;

yesterday = today -1;

switch(yesterday) {
    case Friday:
    case Saturday: qDebug() << "Burning"; break;
    case Monday: qDebug() << "What the Hell"; break;
    default:
        qDebug("Groomy Working Day");
}
  • enum은 위와 같이 사용합니다. 자세한 사용법은 구글님께.

반복문[편집]

  • for는 다음과 같이 사용합니다.
for(변수 = 초기값; 최종값에 대한 ; 변수를 어떻게 증감할건지)
{
  명령문들;
}
  • 예제를 하나 보도록 하죠.
for(int i = 0; i < 10; i++)
{
  res += i;
  qDebug() << i << "까지의 합은 " << res << "입니다.";
}
  • do~while문은 다음과 같이 사용합니다.
do
{
  명령문들;
} while (최종값에 대한 );
  • 이것도 역시 예제를 위의 for와 같은걸 해보도록 하죠.
int i = 0; // 이처럼 변수 선언을 하면서 초기값을 설정할 수 있습니다.
do
{
  i++;
  res += i;
    qDebug() << i << "까지의 합은 " << res << "입니다.";
} while (i < 3);
  • 자, for문과 do~while문의 차이점은 뭘까요?
  1. for는 괄호 안에 모든 내용을 다 집어넣었지요? 사람들은 반복문을 사용할 때 for를 더 많이 사용하는 이유가 있지요.
  2. for는 루프 내에서만 사용되는 변수를 지정할 수 있습니다. while은 미리 변수를 선언해야 하고요.
  3. while은 또 한가지 유의할 점이 있습니다. *무조건* 한번은 프로시져가 실행된다는 점이죠.

배열[편집]

  • 프로그램에서 데이터를 임시로 저장하기 위해서 변수를 사용한다는건 아실겁니다.
  • 그런데 변수중에 '배열'이라는걸 들어보셨을거에요.그걸 왜 쓰는지 궁금하실겁니다.
  • 일단 '배열'이라는건 같은 데이터 타입을 가지는 변수의 '집단'이라고 할 수 있습니다.
  • 예를 들어 10개의 과목에 대한 점수를 기억하려면 다음과 같이 10개의 정수형 변수가 필요할 것입니다.
int score1;
int score2;
int score3;
int score4;
int score5;
int score6;
int score7;
int score8;
int score9;
int score10;
  • 보세요. 보기만 해도 선언도 존나 귀찮고 기억하기도 힘들겠죠?
  • 근데, 이걸 100명분을 작성한다고 칩시다 씨발 장난하자는거야?
  • 이럴땐 다음과 같이 배열로 하면 좀더 쉽게 작성할 수 있습니다.
타입 변수명[갯수];
  • 예제를 하나 보죠.
int score[100];
  • 이런식으로 사용합니다. 다음은 1부터 10까지 돌면서 해당 값에 2를 곱해서 저장하는 프로그램입니다.
int score[10];
for(int i = 0; i < 10; i++)
{
  score[i] = i * 2;
  qDebug() << "i = " << score[i];
}
  • 실행 결과는 다음과 같을 것입니다.

Qt 2 script 0.png

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

동적 배열[편집]

  • 그런데 배열의ㅈㅈ습니다.
int* 변수이름 = new 타입[갯수];
  • 타입 뒤에 *가 들어갑니다. 중요합니다.
  • 또한, 할당하고 나서 다음과 같이 꼭 해제를 해줘야 합니다.
delete[] 변수이름;
  • 요즘 인기있는 언어들이 Garbage Collector를 포함하며, 인터프리터를 지향하고 있는 이유는 해제할 타이밍이 애매한 경우가 많아서입니다.
  • 하지만, 조금 크게 메모리를 할당하거나 하는 방법으로 메모리 해제 타이밍을 잡을 수 있습니다.
  • 또한 QT에서는 QT 데이터타입을 사용하면 내부적으로 Garbage Collector를 적용한다고 합니다. 믿지마 발등찍혀 시x 내가 한두번 찍혀봤어야지
  • 아무튼 예제를 하나 보도록 하겠습니다. 마찬가지로 위와 같은 프로그램입니다.
int* score = new int[10];
for(int i = 0; i < 10; i++)
{
  score[i] = i * 2;
  qDebug() << "i = " << score[i];
}

다차원배열[편집]

  • 지금까지 본건 1차원 배열입니다.
  • QT를 컴파일하는 gcc의 경우 10차원이 넘는 배열을 선언할 수 있습니다. 근데 4차원만 넘어가도 일반적으로 미친놈이라고 하잖아?
  • 간단한 프로그램을 작성해 봅시다.
int data[3][5];
for(int i = 0; i < 3; i++)
{
  for(int j = 0; j < 5; j++)
  {
    data[i][j] = i * j;
    qDebug() << i << "*" << "j" << "=" << data[i][j];
  }
}
  • 대충 무슨 프로그램인지 보이시지요?
  • 자 이걸 구구단으로 바꿔보세요.

구조체[편집]

  • 구조체는 다음과 같이 사용합니다.
struct {
};

함수[편집]

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()
{
    ui->label->setText("하드웨어 지원 최강");
    ui->pushButton->setEnabled(false);
    ui->pushButton_2->setEnabled(true);
    ui->pushButton_3->setEnabled(true);
}

void Dialog::on_pushButton_2_clicked()
{
    ui->label->setText("유저가 최강");
    ui->pushButton->setEnabled(true);
    ui->pushButton_2->setEnabled(false);
    ui->pushButton_3->setEnabled(true);
}

void Dialog::on_pushButton_3_clicked()
{
    ui->label->setText("스타벅스 가냐?");
    ui->pushButton->setEnabled(true);
    ui->pushButton_2->setEnabled(true);
    ui->pushButton_3->setEnabled(false);
}
  • 유의할 점은 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하고, 다음과 같이 변수를 선언해 줍니다.
QString name;
int kor;
int eng;
int math;

int total;
int avg;
  • 각 버튼의 코드는 다음과 같습니다.
void Widget::on_pushButton_clicked()
{
    name = ui->lineEdit->text();
    kor = ui->lineEdit_2->text().toInt();
    eng = ui->lineEdit_3->text().toInt();
    math = ui->lineEdit_4->text().toInt();
    total = kor + eng + math;
    avg = total /3;
    qDebug() << "이름      국어 영어 수학 총점 평균";
    qDebug() << name << " " << kor << " " << eng << " " << math << " " << total << " " << avg;
}

void Widget::on_pushButton_2_clicked()
{
    this->close();
}
  • 실제 입력에 따라 다음과 같이 결과가 출력되는걸 볼 수 있습니다.

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

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

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

실행 화면

Checkbox result.png

  • 헤더에 변수를 하나 선언합니다.
int sum;
  • 위 폼은 쉽게 만들 수 있을것이라 생각하고, 각 버튼의 코드는 다음과 같습니다.
void Widget::on_pushButton_clicked()
{
    sum = 0;
    if(ui->checkBox->isChecked())
        sum += 650000;
    if(ui->checkBox_2->isChecked())
        sum += 550000;
    if(ui->checkBox_3->isChecked())
        sum += 150000;
    if(ui->checkBox_4->isChecked())
        sum += 250000;
    ui->lineEdit->setText(QString::number(sum));
}

void Widget::on_pushButton_2_clicked()
{
    ui->checkBox->setChecked(false);
    ui->checkBox_2->setChecked(false);
    ui->checkBox_3->setChecked(false);
    ui->checkBox_4->setChecked(false);
    ui->lineEdit->setText("");
}
  • 체크버튼을 누르면 바로 적용되도록 만들 수 있을 것입니다.
  • 이건 직접 해보시는게 어떨까요?

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

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

Qt 3 result 0.png

  • 자신의 연령대를 선택하고 연애인을 선택한 후 결과보기 버튼을 누르면 텍스트 상자에 결과가 표시됩니다.
  • 다시보기 버튼을 누르면 내용이 싹 지워져서 새로 선택하기 편하도록 편의성을 높였습니다.
  • 헤더에 추가할 코드는 다음과 같습니다.
QString age;
QString singer;
  • 소스코드에 추가할 내용입니다. PushButton에 슬롯으로 작성하는건 이제 다들 익숙해지셨으리라 생각합니다.
void Widget::on_pushButton_clicked()
{
    singer = "";
    if(ui->radioButton->isChecked())
        age = "10대";
    if(ui->radioButton_2->isChecked())
        age = "20대";
    if(ui->radioButton_3->isChecked())
        age = "30대";
    if(ui->radioButton_4->isChecked())
        age = "40대";
    if(ui->radioButton_5->isChecked())
        age = "외계인";
    if(ui->checkBox->isChecked())
        singer += "소녀시대 ";
    if(ui->checkBox_2->isChecked())
        singer += "2ne1 ";
    if(ui->checkBox_3->isChecked())
        singer += "이선희 ";
    if(ui->checkBox_4->isChecked())
        singer += "걸스데이 ";
    if(ui->checkBox_5->isChecked())
        singer += "EXO ";
    ui->lineEdit->setText(age + "인 당신은 " + singer +"를 좋아하네요.");
}

void Widget::on_pushButton_2_clicked()
{
    ui->radioButton->setChecked(false);
    ui->radioButton_2->setChecked(false);
    ui->radioButton_3->setChecked(false);
    ui->radioButton_4->setChecked(false);
    ui->radioButton_5->setChecked(false);
    ui->checkBox->setChecked(false);
    ui->checkBox_2->setChecked(false);
    ui->checkBox_3->setChecked(false);
    ui->checkBox_4->setChecked(false);
    ui->checkBox_5->setChecked(false);
    ui->lineEdit->setText("");
}

QGroupBox[편집]

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

실행화면

QGroupBox 1.png

QGroupBox 2.png

  • 보시면 2개의 그룹박스를 사용하고 있습니다.
  • PC 보유현황과 주변장치현황이 프레임입니다.
  • 나머지 내용은 위의 QRadiobutton강좌와 같다고 보시면 됩니다.
  • 헤더에는 변수를 선언해 줍니다.
QString com;
QString phr;
  • 다음은 버튼에 관한 코드입니다.
void Widget::on_pushButton_clicked()
{
    phr = "";
    if(ui->radioButton->isChecked())
        com = ui->radioButton->text();
    if(ui->radioButton_2->isChecked())
        com = ui->radioButton_2->text();
    if(ui->radioButton_3->isChecked())
        com = ui->radioButton_3->text();
    if(ui->radioButton_4->isChecked())
        com = ui->radioButton_4->text();
    if(ui->checkBox->isChecked())
        phr += ui->checkBox->text();
    if(ui->checkBox_2->isChecked())
        phr += ui->checkBox_2->text();
    if(ui->checkBox_3->isChecked())
        phr += ui->checkBox_3->text();
    if(ui->checkBox_4->isChecked())
        phr += ui->checkBox_4->text();
    ui->lineEdit->setText("당신은 " + com + "컴퓨터와 " + phr + "주변장치를 보유중입니다.");
}

QListWidget[편집]

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

Listwidget result.png

  • 코드는 매우 간단합니다.
void Widget::on_pushButton_clicked()
{
    ui->listWidget->addItem(ui->lineEdit->text());
    ui->lineEdit->setText("");
}

QComboBox[편집]

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

결과화면

Combobox result.png

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

Combobox slot.png

  • 코드는 다음과 같습니다.
void Widget::on_comboBox_currentIndexChanged(int index)
{
    if(index == 0)
    {
        ui->comboBox_2->clear();
        ui->comboBox_2->addItem("연남동");
        ui->comboBox_2->addItem("서교동");
        ui->comboBox_2->addItem("동교동");
    }
    if(index == 1)
    {
        ui->comboBox_2->clear();
        ui->comboBox_2->addItem("삼청동");
        ui->comboBox_2->addItem("사직동");
        ui->comboBox_2->addItem("계동");
    }
    if(index == 2)
    {
        ui->comboBox_2->clear();
        ui->comboBox_2->addItem("신사동");
        ui->comboBox_2->addItem("논현동");
        ui->comboBox_2->addItem("도곡동");
    }
}

void Widget::on_comboBox_2_currentIndexChanged(int index)
{
    ui->lineEdit->setText("선택된 주소는 " + ui->comboBox->currentText() + " " + ui->comboBox_2->currentText() + "입니다.");
}

Slider & Dial[편집]

  • 슬라이더를 봅시다.오빠이 슬라이더라는 일본게임을 생각하면 이해가 쉬울것임
  • 각각의 슬라이더의 값 변화에 따라 레이블도 변화하도록 해봅시다.
  • Dial은 꼭 옛날 전축에 있던거랑 비슷하게 생겼지요?

결과화면

Sliders result.png

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

슬롯 선택

  • 코드는 다음과 같이 작성하면 된다.
void Widget::on_horizontalScrollBar_valueChanged(int value)
{
    ui->label->setText(QString("%1").arg(value));
    ui->dial->setValue(value);
}

void Widget::on_horizontalSlider_valueChanged(int value)
{
    ui->label_2->setText(QString("%1").arg(value));
}

void Widget::on_verticalScrollBar_valueChanged(int value)
{
    ui->label_3->setText(QString("%1").arg(value));
}

void Widget::on_verticalSlider_valueChanged(int value)
{
    ui->label_4->setText(QString("%1").arg(value));
}

QTimer[편집]

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

실행화면

Clock result.png

  • 시계는 코드에 직접 작성해 주어야 합니다짜증
  • 헤더파일에 QTimer와 QDateTime을 include해줍니다.
  • QTimer는 타이머고, QDateTime은 현재시각을 받아오기 위해 사용합니다.
  • private:에 timer를 하나 선언하고, private slots:에 tupdate() 함수를 등록해 줍니다.
private:
    QTimer* timer;

private slots:
    int tupdate();
  • 프로그램이 실행되면서 타이머가 동작하도록 아래의 코드를 메인 위젯 안에 넣어줍니다.
timer = new QTimer(this); // 타이머 생성
connect(timer, SIGNAL(timeout()), this, SLOT(tupdate())); // 타이머가 타임아웃이 되면 tupdate()를 호출
timer->start(1000); // 1000은 밀리세컨드 단위. 타임아웃을 몇 ms로 할것인지 정함. 여기서는 1초마다 한번씩.
  • 그리고, tupdate() 함수를 다음과 같이 작성합니다.
int Widget::tupdate()
{
    QDateTime local(QDateTime::currentDateTime());
    ui->label_3->setText(local.toString());
    return 0;
}

QFileDialog[편집]

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

실행화면

File result.png

  • 파일 다이얼로그를 사용하기 위해서는 QFileDialog를 include해야 합니다.
#include <QFileDialog>
  • 그리고 버튼에 대한 코드는 다음과 같습니다.
void Widget::on_pushButton_clicked()
{
    QString file = QFileDialog::getOpenFileName();
    ui->lineEdit->setText(file);
}

void Widget::on_pushButton_2_clicked()
{
    this->close();
}
  • 파일 컨트롤도 참 쉽죠?
  • 속성도 지정할 수 있습니다. png 파일만 연다든지.. 이 부분은 직접 해보세요 :)

QGraphicsView[편집]

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

Qt graphic result.png

  • 헤더파일의 수정은 다음과 같습니다.
// 헤더를 include해줍니다.
#include <QGraphicsScene>
#include <QPixmap>

// private 선언부에 scene 변수를 선언해 둡니다.
QGraphicsScene scene;
  • 소스코드입니다.
// Widget 안 setupUi 이후에 다음과 같은 코드를 삽입합니다.
    QPixmap pix("hello.png");
    scene.addPixmap(pix);
    ui->graphicsView->setScene(&scene);
    ui->graphicsView->show();
  • 실행파일과 같은 디렉토리에 hello.png (png 파일 아무거나 넣어보세요)가 있다면 그 그림파일이 출력될 것입니다.
  • 과제 : 전에 배운 FileOpenDialog를 이용해서, 파일을 선택해 보여줄 수 있도록 만들어 봅시다.

QTabWidget[편집]

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

Settings-ss00.png

QProgressBar[편집]

  • 프로그레스바에 대해 알아보도록 하겠습니다.
  • 가짜로 만든 로딩바 입니다.요샌 컴터들이 존내 빨라서 뭘 로딩해도 몇 밀리초면 끝나 ㅅㅂ

Progressbar-ss00.png

  • 헤더는 다음과 같습니다
// QTimer를 include해줍니다
#include <QTimer>

// 함수 정의에 다음과 같이 해줍니다.
private:
    Ui::Widget *ui;
    QTimer* timer;
    int tick;

private slots:
    int tupdate();
  • 소스코드는 다음과 같습니다.
// setupUi 다음에 넣어줍니다.
    timer = new QTimer(this);
    connect(timer, SIGNAL(timeout()), this, SLOT(tupdate()));
    tick = 0;
    timer->start(10);

// tupdate 함수는 다음과 같습니다.
int Widget::tupdate()
{
    if(tick == 100) ui->label->setText("Loading Complete");
    if(tick < 100) tick++;
    ui->progressBar->setValue(tick);
}

계산기[편집]

Calculator result.png

  • 새로운 개념이 추가된 것은 없습니다. 기존에 배운 개념을 활용하여 만들 수 있습니다.
  • 소스코드는 아래와 같습니다.
void Widget::on_pushButton_1_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "1");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "1");
    }
}

void Widget::on_pushButton_2_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "2");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "2");
    }
}

void Widget::on_pushButton_3_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "3");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "3");
    }
}

void Widget::on_pushButton_4_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "4");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "4");
    }
}

void Widget::on_pushButton_5_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "5");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "5");
    }
}

void Widget::on_pushButton_6_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "6");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "6");
    }
}

void Widget::on_pushButton_7_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "7");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "7");
    }
}

void Widget::on_pushButton_8_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "8");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "8");
    }
}

void Widget::on_pushButton_9_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "9");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "9");
    }
}

void Widget::on_pushButton_11_clicked()
{
    if (QString::compare (ui->lineEdit_2->text(), "") == 0)
    {
        ui->lineEdit->setText(ui->lineEdit->text() + "10");
    }
    else
    {
        ui->lineEdit_3->setText(ui->lineEdit_3->text() + "10");
    }
}

void Widget::on_pushButton_10_clicked()
{
    ui->lineEdit->setText("");
    ui->lineEdit_2->setText("");
    ui->lineEdit_3->setText("");
    ui->lineEdit_4->setText("");
}

void Widget::on_pushButton_13_clicked()
{
    ui->lineEdit_2->setText("+");
}

void Widget::on_pushButton_14_clicked()
{
    ui->lineEdit_2->setText("-");
}

void Widget::on_pushButton_15_clicked()
{
    ui->lineEdit_2->setText("*");
}

void Widget::on_pushButton_16_clicked()
{
    ui->lineEdit_2->setText("/");
}

void Widget::on_pushButton_12_clicked()
{
    if (ui->lineEdit_2->text() == "+")
        ui->lineEdit_4->setText(QString::number(ui->lineEdit->text().toInt(NULL, 10) + ui->lineEdit_3->text().toInt(NULL, 10)));
    else if (ui->lineEdit_2->text() == "-")
        ui->lineEdit_4->setText(QString::number(ui->lineEdit->text().toInt(NULL, 10) - ui->lineEdit_3->text().toInt(NULL, 10)));
    else if (ui->lineEdit_2->text() == "*")
        ui->lineEdit_4->setText(QString::number(ui->lineEdit->text().toInt(NULL, 10) * ui->lineEdit_3->text().toInt(NULL, 10)));
    else if (ui->lineEdit_2->text() == "/")
        ui->lineEdit_4->setText(QString::number(ui->lineEdit->text().toInt(NULL, 10) / ui->lineEdit_3->text().toInt(NULL, 10)));
}

파일 다루기[편집]

메모장 프로그램[편집]

Editor result.png

  • 간단하게 만들어 본 프로그램입니다.
  • TextEdit 컨트롤과 ListWidget 컨트롤, PushButton 컨트롤을 사용하였습니다.
  • 헤더파일에 추가할 내용은 다음과 같습니다.
// 헤더 include
#include <QFileDialog>
#include <QMessageBox>
// Private 변수
    QDir dir;
    QFileInfoList list;
  • 소스코드는 다음과 같습니다.
void Widget::on_pushButton_4_clicked()
{
    dir = QFileDialog::getExistingDirectory();
    dir.setFilter(QDir::Files | QDir::Hidden | QDir::NoSymLinks);
    ui->listWidget->clear();
    list = dir.entryInfoList();
    for (int i = 0; i < list.size(); ++i) {
        QFileInfo fileInfo = list.at(i);
        ui->listWidget->addItem(QString("%1").arg(fileInfo.fileName()));
    }
}

void Widget::on_pushButton_clicked()
{
    QString path, filename;
    filename = QString("%1").arg(list.at(ui->listWidget->currentIndex().row()).absoluteFilePath());
    QFile file(filename);
    file.open(QIODevice::ReadOnly);
    ui->textEdit->clear();
    ui->textEdit->append(file.readAll());
    file.close();
    QMessageBox msgbox;
    msgbox.setText("File Opened");
    msgbox.exec();
}

void Widget::on_pushButton_2_clicked()
{
    QString path, filename;
    filename = QString("%1").arg(list.at(ui->listWidget->currentIndex().row()).absoluteFilePath());
    QFile file(filename + ".text");
    QByteArray bytearray = ui->textEdit->toPlainText().toUtf8().left(ui->textEdit->toPlainText().length());
    file.open(QIODevice::WriteOnly);
    file.write(bytearray);
    file.close();
    QMessageBox msgbox;
    msgbox.setText("File Saved");
    msgbox.exec();
}

void Widget::on_pushButton_3_clicked()
{
    this->close();
}

void Widget::on_listWidget_doubleClicked(const QModelIndex &index)
{
    QString path, filename;
    filename = QString("%1").arg(list.at(index.row()).absoluteFilePath());
    QFile file(filename);
    file.open(QIODevice::ReadOnly);
    ui->textEdit->clear();
    ui->textEdit->append(file.readAll());
    file.close();
}
  • 좀 길어보이긴 하지만 다 했던 내용입니다.
  • 연습문제 : 상단 메뉴바가 있는 MainWindow 프로그램으로 변환해 보세요.

데이터베이스 다루기[편집]

  • sqlite를 이용하여 간단한 일기장을 만들어 보도록 하겠습니다.

Simple diary result.png

  • QT에서는 기본적으로 sqlite3를 지원해 줍니다.
  • ubuntu에서는 기본으로 sqlite2지만, sqlite3를 설치하면 됩니다.
  • SQL 관련 내용을 사용하기 위해서는 pro 파일도 수정해야 합니다.
QT       += core gui sql
  • 위와 같이 sql을 추가해 줍니다.
  • 추가하지 않으면 헤더를 추가해도 라이브러리가 참조되지 않아, 컴파일 에러가 납니다. 꼭 추가해 주어야 합니다.
  • 이제, 헤더에 다음과 같은 내용을 추가합니다.
// 헤더 include
#include <QtSql/QtSql>
// private 변수
    QSqlDatabase db;
  • sql 파일의 위치는 이따 소스코드에 직접 지정해 주세요.
  • sql 파일은 sqlite3에서 다음과 같은 명령어로 생성하였습니다.
sqlite> create table note ( id INTEGER PRIMARY KEY AUTOINCREMENT, date text, title text, content text);
  • 소스코드는 다음과 같습니다.
void Widget::on_calendarWidget_clicked(const QDate &date)
{
    qWarning() << date.toString();
}

void Widget::on_pbOpen_clicked()
{
    QSqlQuery query;
    QString exeq;

    int exist = 0;

    query.clear();
    exeq = "select * from note where date ='" + ui->calendarWidget->selectedDate().toString() + "';";
    query.exec(exeq);
    while(query.next())
    {
        QString date = query.value(0).toString();
        ui->leTitle->setText(query.value("title").toString());
        ui->teContent->clear();
        ui->teContent->appendPlainText(query.value("content").toString());
        exist = 1;
    }
    if(!exist)
        qWarning() << "None";
}

void Widget::on_pbExit_clicked()
{
    db.close();
    this->close();
}

void Widget::on_pbSave_clicked()
{
    QSqlQuery query;
    QString exeq;

    query.clear();
    exeq = "insert into note (date, title, content) values ('" + ui->calendarWidget->selectedDate().toString()+"', '"+ui->leTitle->text()+"', '"+ui->teContent->toPlainText()+"');";
}
  • 연습문제 : 노트패드의 경우와 같이, 메뉴가 되어 있는 프로그램으로 변경해 봅시다. 데이터베이스 생성도 같이.

네트워크 프로그래밍[편집]

채팅[편집]

  • 네트워크 어플리케이션의 시작은 채팅 프로그램입니다.
  • 아래 파일은 서버 / 클라이언트가 함께 동작하는 예제 프로그램입니다.ㄴㅇㅁㅇㅁㅇㅁㄴㅇㅁㅇㅁ

파일:Qt-network-chat.zip ㅁㅁㅁㅁ