[VEDA] QT Programming 2

나우히즈·2025년 4월 19일

QT veda 한화비전

VEDA

목록 보기

14/16

다양한 위젯들을 보며서 이런 저런 gui프로그램을 만들어보자.

오늘은 교재 5장, 6장에 나온 위젯들에 대해 공부해보자.

Qt에서 제공되는 gui 위젯들.

위젯들이 클래스로 제공되고 있었다.

푸쉬버튼같은 경우 버튼을 누르면 이벤트가 발생되고 그것을 슬롯함수를 통해 처리함.

버튼들의 컨테이너 같은 역할을 하는 QButtonGroup이 있다.

그룹으로 만든 뒤 해당 버튼들의 속성을 일괄 적용할 수 있다.

교재에서는 setExclusive(true/false) 를 통해 그룹 내의 버튼들의 다중선택 여부를 선택할 수 있다.

버튼그룹에 등록하려면 addbutton 함수를 통해 하면 됨.

// widget.cpp
#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QString str1[4] = {"box1", "box2", "box3", "box4"};

    int xpos = 30;
    int ypos = 30;

    m_chk_group[0] = new QButtonGroup(this);
    m_state = new QLabel(this);
    m_state->setText("State : " + QString::number(0));

    for(int i = 0 ; i < 4 ; i++)
    {
        m_exclusive[i] = new QCheckBox(str1[i], this);
        m_exclusive[i]->setGeometry(xpos, ypos, 120, 30);
        
        // 버튼그룹에 생성한 체크박스를 추가
        m_chk_group[0]->addButton(m_exclusive[i]);

				// 체크박스에 대해 발생하는 시그널에 대해 슬롯함수 연결
        connect(m_exclusive[i], &QCheckBox::clicked, this, &Widget::slot_chkChanged);
        ypos += 40;
    }
    
    m_chk_group[0]->setExclusive(true);
}

void Widget::slot_chkChanged()
{
    int n = 0;
    for(int i = 0 ; i < 4 ; i++)
    {
        if(m_exclusive[i]->checkState())
        {
            qDebug("checkbox %d selected ", i+1);
            m_state->setText("State : " + QString::number(i+1));
            n++;
        }
    }
}

Widget::~Widget(){}

// widget.h
#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QCheckBox>
#include <QButtonGroup>
#include <QLabel>

class Widget : public QWidget
{
    Q_OBJECT

public:
    Widget(QWidget *parent = nullptr);
    ~Widget();

private:
    QButtonGroup    *m_chk_group[2];
    QCheckBox       *m_exclusive[4];
    QCheckBox       *m_non_exclusive[3];
    QLabel          *m_state;

private slots:
    void slot_chkChanged();

};
#endif // WIDGET_H

connect를 강사님은

    connect(m_chk_group[0], &QButtonGroup::idClicked, this,[=](int id){
        m_state->setText("State : " + QString::number(id+1));
    });

로 만드심.

idclicked라는 시그널이 발생 시 눌려진 id값을 슬롯함수로 넘긴다.


connect(m_chk_group[0], &QButtonGroup::idClicked, this,[=](int id){
    m_state->setText("State : " + QString::number(id+1));
});

이 연결에서 id는 버튼에 부여된 ID 값인데, addButton(button, id) 형태로 ID를 명시하지 않는다면 기본값 -1이 할당됨.

따라서 아무 체크박스를 누르면 State : -값 이렇게 보임

✅ 해결 방법: addButton 시, ID를 명시적으로 설정

m_chk_group[0]->addButton(m_exclusive[i], i);  // i를 버튼의 고유 ID로 지정

이렇게 바꾸면, 이제 idClicked(int id)에서 올바른 ID를 받아올 수 있습니다.

리소스를 추가하여 아이콘을 추가할 수 있음.

iconfinder.com ← 아이콘 다운받기 가능

qt프로젝트 폴더 내에 resources 폴더를 만들고 거기에 아이콘을 추가해주자.

이후 add new → resource 하여 프로젝트에 리소스 파일을 넣어 연결.

61페이지 참고

QRadioButton

🔹 목적

여러 개 중에서 하나만 선택해야 하는 경우에 사용되는 버튼.
- 예: 성별 선택 (남 / 여), 결제 수단 (카드 / 계좌이체 / 간편결제) 등

🔹 QCheckBox와의 차이

항목	QCheckBox	QRadioButton
선택 수	여러 개 선택 가능	하나만 선택 (exclusive)
상태	on/off 독립 상태	그룹 내에서 하나만 on
UI 용도	옵션 설정	단일 선택 항목

🔹 기본적으로 exclusive한 성격을 가짐

QRadioButton을 여러 개 만들고, 같은 부모 위젯 안에 놓으면 자동으로 exclusive하게 동작함.
단, 명시적으로 관리하고 싶을 땐 QButtonGroup을 사용해서 그룹화 가능.

📌 예시 코드

QRadioButton *rb1 = new QRadioButton("Option 1", this);
QRadioButton *rb2 = new QRadioButton("Option 2", this);
QRadioButton *rb3 = new QRadioButton("Option 3", this);

// layout에 추가만 해도 기본적으로 하나만 선택됨 (exclusive)

🎯 혹은 QButtonGroup으로 명확하게 그룹 관리도 가능

QButtonGroup *group = new QButtonGroup(this);
group->addButton(rb1);
group->addButton(rb2);
group->addButton(rb3);
group->setExclusive(true);  // 기본값이긴 하지만 명시 가능

QT에서 제공하는 시간 위젯 클래스

QDate, QTime, QDateTime.

QDateEdit, QTimeEdit, QDateTimeEdit

시간 관련 위젯은 위 클래스들을 활용하면 된다.

p68에 시간 관련 UI만들때 쓰는 내용이 나와있음.

QDate, QDateEdit
✅ QDate 클래스
📌 역할:

날짜 정보를 저장하고 조작할 수 있는 비주얼 없는 순수 데이터 클래스.

📅 기능:
- 날짜 생성: 특정 연/월/일 날짜 만들기
- 날짜 비교: ==, <, >, daysTo() 등
- 날짜 계산: addDays(), addMonths() 등
- 유효성 검사: isValid()
- 오늘 날짜 가져오기: QDate::currentDate()
  
  ✨ 예제:
```
QDate today = QDate::currentDate();            // 오늘 날짜
QDate birth(2000, 5, 17);                      // 2000년 5월 17일
int days = birth.daysTo(today);                // 생일부터 오늘까지 며칠?
bool isValid = QDate(2023, 2, 29).isValid();   // false (윤년 아님)
```
  ✅ QDateEdit 위젯
  
  📌 역할:
  
  사용자가 날짜를 선택하거나 입력할 수 있는 UI 위젯.
  
  내부적으로 QDate 객체와 연결되어 동작함.
  
  🧩 특징:
- QLineEdit처럼 보이지만 날짜 형식만 입력/선택 가능
- 스핀박스처럼 위/아래 화살표로 날짜 조정 가능
- calendarPopup을 활성화하면 달력 팝업도 가능
  
  ✨ 예제:
```
QDateEdit *dateEdit = new QDateEdit(this);
dateEdit->setDate(QDate::currentDate());            // 오늘 날짜 설정
dateEdit->setDisplayFormat("yyyy-MM-dd");           // 포맷 설정
dateEdit->setCalendarPopup(true);                   // 달력 팝업 열기
```
  🔁 QDate와 QDateEdit 관계
  
  클래스 역할 비고
  QDate 날짜 데이터 저장/조작 UI 없음, 내부 로직용
  QDateEdit 날짜 입력 UI 위젯 내부적으로 QDate 사용함
```
QDate date = dateEdit->date();         // 사용자 입력 날짜 가져오기
dateEdit->setDate(QDate(2025, 4, 7));  // 날짜 설정
```
  궁금하면 QDateTime, QDateTimeEdit, QTime, QTimeEdit도 함께 볼 수 있어!
  
  UI + 로직 동시에 배울 수 있어서 Qt에서 엄청 자주 써 😄
  
  다음으로 시간도 다뤄볼까?

클래스	역할	비고
`QDate`	날짜 데이터 저장/조작	UI 없음, 내부 로직용
`QDateEdit`	날짜 입력 UI 위젯	내부적으로 `QDate` 사용함

QTime, QTimeEdit

✅ QTime 클래스

📌 역할:

시, 분, 초, 밀리초까지 표현 가능한 비주얼 없는 시간 데이터 클래스

🕐 주요 기능:

현재 시간: QTime::currentTime()
시간 생성: QTime(시, 분, 초)
시간 연산: addSecs(), addMSecs(), secsTo(), msecsTo()

유효성 검사: isValid()

✨ 예제:

QTime now = QTime::currentTime();           // 현재 시간
QTime lunch(12, 30, 0);                     // 12시 30분
int seconds = lunch.secsTo(now);           // lunch 이후 몇 초 지났는지
QTime future = now.addSecs(3600);          // 한 시간 후

✅ QTimeEdit 위젯

📌 역할:

시간 입력을 위한 UI 위젯 클래스

내부적으로 QTime 객체를 사용해서 동작함

🧩 특징:

기본적으로 시/분/초 조정 가능 (밀리초는 UI로 못 바꿈)
위/아래 버튼으로 조절하거나 직접 입력

setDisplayFormat()으로 표시 형식 바꿀 수 있음

✨ 예제:

QTimeEdit *timeEdit = new QTimeEdit(this);
timeEdit->setTime(QTime::currentTime());           // 현재 시간 설정
timeEdit->setDisplayFormat("HH:mm:ss");            // 24시간제 형식

🔁 QTime 과 QTimeEdit 관계

클래스	역할	비고
`QTime`	시간 데이터 저장/조작	UI 없음, 로직 처리용
`QTimeEdit`	시간 입력 위젯	내부적으로 `QTime`을 사용

QTime time = timeEdit->time();                 // 현재 입력된 시간 가져오기
timeEdit->setTime(QTime(9, 0));                // 시간 설정

✅ 실습 예: 입력한 시간 표시

QTimeEdit *timeEdit = new QTimeEdit(this);
timeEdit->setDisplayFormat("HH:mm:ss");

QLabel *label = new QLabel("Time: --:--:--", this);

connect(timeEdit, &QTimeEdit::timeChanged, this, [=](const QTime &time){
    label->setText("Time: " + time.toString("HH:mm:ss"));
});

QDateTime, QDateTimeEdit

✅ QDateTime 클래스

📌 역할:

날짜(QDate)와 시간(QTime)을 함께 다룰 수 있는 비주얼 없는 클래스

🕰 기능:

현재 날짜와 시간: QDateTime::currentDateTime()
날짜/시간 설정: setDate(), setTime(), setDateTime()
시간 연산: addDays(), addSecs(), secsTo() 등

타임존 처리: setTimeZone(), toUTC(), toTimeZone()

✨ 예제:

QDateTime now = QDateTime::currentDateTime();     // 현재 날짜+시간
QDateTime deadline(QDate(2025, 4, 10), QTime(18, 0));  // 특정 시점

int secondsLeft = now.secsTo(deadline);           // 남은 초 계산
QDateTime tomorrow = now.addDays(1);              // 하루 뒤

✅ QDateTimeEdit 위젯

📌 역할:

사용자가 날짜와 시간 둘 다 입력할 수 있는 UI 위젯

🧩 특징:

기본적으로 QDateTime 객체와 연결되어 있음
날짜/시간 입력을 모두 하나의 필드에서 처리 가능

calendarPopup 기능도 지원 (달력 선택)

✨ 예제:

QDateTimeEdit *dtEdit = new QDateTimeEdit(this);
dtEdit->setDateTime(QDateTime::currentDateTime());      // 현재 시각으로 설정
dtEdit->setDisplayFormat("yyyy-MM-dd HH:mm:ss");        // 표시 포맷
dtEdit->setCalendarPopup(true);                         // 달력 팝업 사용

🔁 QDateTime vs QDate/QTime

클래스	설명
`QDateTime`	날짜 + 시간 복합 데이터 클래스
`QDateTimeEdit`	날짜/시간 모두 입력 가능한 위젯
`QDateEdit`	날짜만 입력
`QTimeEdit`	시간만 입력

🧪 예제: 입력된 날짜와 시간 출력

QDateTimeEdit *dtEdit = new QDateTimeEdit(this);
dtEdit->setDisplayFormat("yyyy-MM-dd HH:mm:ss");
dtEdit->setCalendarPopup(true);

QLabel *label = new QLabel("Selected time: ", this);

connect(dtEdit, &QDateTimeEdit::dateTimeChanged, this, [=](const QDateTime &dt){
    label->setText("Selected time: " + dt.toString("yyyy-MM-dd HH:mm:ss"));
});

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{

    QDateTimeEdit *qde1;
    qde1 = new QDateTimeEdit(QDateTime::currentDateTime(), this);
    qde1->setDisplayFormat("yyyy-MM-dd hh:mm:ss:zzz");
    qde1->setGeometry(10, 30, 250, 30);

    QDateTimeEdit *qde[3];

    qde[0] = new QDateTimeEdit(QDate::currentDate(), this);
    qde[0]->setMinimumDate(QDate::currentDate().addYears(-3));
    qde[0]->setMaximumDate(QDate::currentDate().addYears(3));
    qde[0]->setDisplayFormat("yyyy");
    qde[0]->setGeometry(10, 90, 100, 30);

    qde[1] = new QDateTimeEdit(QDate::currentDate(), this);
    qde[1]->setMinimumDate(QDate::currentDate().addMonths(-2));
    qde[1]->setMaximumDate(QDate::currentDate().addMonths(2));
    qde[1]->setDisplayFormat("MM");
    qde[1]->setGeometry(120, 90, 100, 30);

    qde[2] = new QDateTimeEdit(QDate::currentDate(), this);
    qde[2]->setMinimumDate(QDate::currentDate().addDays(-20));
    qde[2]->setMaximumDate(QDate::currentDate().addDays(20));
    qde[2]->setDisplayFormat("dd");
    qde[2]->setGeometry(230, 90, 100, 30);

}

Widget::~Widget()
{
}

범위 조정 위젯 클래스

숫자형태로 범위를 지정하고, 그안에서 범위 내 값을 선택.

기본은 0~99.

필요 시 레인지 설정 후 슬라이딩 또는 다이얼 위젯을 통해 선택 가능함.

//slider
#include <QApplication>
#include <QSlider>
#include <QStyleFactory>
int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    QSlider *slider = new QSlider( );
    slider->setOrientation(Qt::Horizontal); // 슬라이더 수직방향 수평방향 설정
    slider->setTickPosition(QSlider::TicksAbove); // 눈금위치 상하좌우 중 설정
    slider->setStyle(QStyleFactory::create("Fusion")); // 눈금 스타일
    slider->show( );
    return a.exec( );
}

보통 QSlider에서는 valueChanged() 시그널을 많이 사용한다.

이에 따른 슬롯함수를 만들어서 사용하도록 하자.

QScrollArea & OScrollBar, QDial
✅ QScrollArea
📌 역할:

한 화면에 다 안 들어오는 콘텐츠를 스크롤해서 볼 수 있게 해주는 컨테이너 위젯

🔹 특징:
- 안에 하나의 위젯을 setWidget()으로 넣음 (스크롤 대상)
- 자동으로 수직/수평 스크롤바를 붙여줌
- widgetResizable 설정으로 내부 위젯 크기 조절 여부 조정 가능
  
  ✨ 예제:
```
QScrollArea *scroll = new QScrollArea(this);
QLabel *bigLabel = new QLabel("엄청 큰 텍스트 or 이미지", scroll);
scroll->setWidget(bigLabel);              // 스크롤할 대상
scroll->setWidgetResizable(true);         // 스크롤 대상 크기에 따라 자동 조절
```
  ✅ QScrollBar
  
  📌 역할:
  
  스크롤만 따로 컨트롤하는 수동 스크롤바 위젯
- QScrollArea 안에 자동으로 붙는 게 아니라, 직접 배치해서 조작할 때 쓰는 위젯
- setRange(min, max), setValue(val) 등으로 위치/범위 설정 가능
- 수평/수직 방향 모두 가능 (Qt::Vertical, Qt::Horizontal)
  
  ✨ 예제:
```
QScrollBar *vScroll = new QScrollBar(Qt::Vertical, this);
vScroll->setRange(0, 100);
vScroll->setValue(50);

connect(vScroll, &QScrollBar::valueChanged, this, [](int value){
    qDebug() << "스크롤 위치:" << value;
});
```
  🧠 보통 커스텀 UI나 그래픽 뷰에서 스크롤을 직접 제어하고 싶을 때 사용해!
  
  ✅ QDial
  
  📌 역할:
  
  회전식 다이얼 입력 위젯 — 음량, 각도 조절 등 아날로그 느낌 UI에 적합
  
  🔹 특징:
- QSlider랑 기능은 비슷하지만 시각적으로 원형
- setRange(), setValue(), setNotchesVisible() 등 가능
- 드래그로 회전시키거나 키보드 ↑↓ 로 제어
  
  ✨ 예제:
```
QDial *dial = new QDial(this);
dial->setRange(0, 100);
dial->setValue(25);
dial->setNotchesVisible(true);   // 눈금 보이게

connect(dial, &QDial::valueChanged, this, [](int v){
    qDebug() << "다이얼 값:" << v;
});
```

교재 예제 참조.p83

QSpinBox

✅ QSpinBox

📌 역할:

정수를 + / - 버튼이나 키보드 입력으로 조절하는 입력 위젯

🧩 주요 특징

기본적으로 정수형 숫자만 다룸
키보드로 직접 입력하거나, 위/아래 버튼 클릭으로 값 조절
setRange(min, max)로 범위 설정 가능
setValue(val)로 초기값 설정

setSingleStep(step)으로 한 번 누를 때 증가량 설정

✨ 기본 사용 예제

QSpinBox *spin = new QSpinBox(this);
spin->setRange(0, 100);           // 0 ~ 100 사이
spin->setValue(50);               // 초기값
spin->setSingleStep(5);           // +5, -5씩 움직임

connect(spin, QOverload<int>::of(&QSpinBox::valueChanged), this, [](int value){
    qDebug() << "스핀박스 값:" << value;
});

🧩 유용한 설정들

메서드	설명
`setPrefix("x ")`	값 앞에 접두사 붙이기 (`x 10`, `x 20`)
`setSuffix(" ms")`	값 뒤에 접미사 붙이기 (`100 ms`, `200 ms`)
`setWrapping(true)`	최대값에서 + 누르면 최소값으로 감김 (순환)
`setAccelerated(true)`	오래 누르면 빠르게 증가

✅ `QDoubleSpinBox` 도 있어!

QSpinBox는 정수만 다루지만, 실수를 다루고 싶으면 QDoubleSpinBox를 쓰면 돼:

QDoubleSpinBox *doubleSpin = new QDoubleSpinBox(this);
doubleSpin->setRange(0.0, 1.0);
doubleSpin->setSingleStep(0.1);
doubleSpin->setDecimals(2);  // 소수점 자릿수 설정

#include "widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    spinBox = new QSpinBox(this);
    spinBox->move(10, 40);
    state = new QLabel("State : 0     ", this);

    spinBox->setRange(0, 100);
    spinBox->setSuffix("%");
    spinBox->setWrapping(true);
    spinBox->setSpecialValueText("Percent");

    connect(spinBox, &QSpinBox::valueChanged, state, [=](int i){
        qDebug() << "SpinBox value : " << i << '\n';
        state->setText("State : " + QString::number(i));
    });
}

Widget::~Widget() {}

텍스트 형태로 값을 넣어야 하는 경우

→ 문자열 입력 위젯 클래스를 사용해보자.

QLineEdit

✅ QLineEdit

📌 역할:

한 줄짜리 텍스트 입력을 위한 위젯

사용자가 직접 문자열을 입력하거나, 프로그래머가 값을 표시할 수 있어.

🧩 주요 기능들

기능	메서드
텍스트 설정	`setText("hello")`
텍스트 가져오기	`text()`
입력 제한 (숫자, 알파벳 등)	`setValidator()` or `setInputMask()`
비밀번호 입력	`setEchoMode(QLineEdit::Password)`
플레이스홀더 텍스트	`setPlaceholderText("이름을 입력하세요")`
편집 시 시그널 발생	`textChanged`, `editingFinished` 등

✨ 기본 사용 예제

QLineEdit *lineEdit = new QLineEdit(this);
lineEdit->setPlaceholderText("이름을 입력하세요");

connect(lineEdit, &QLineEdit::textChanged, this, [](const QString &text){
    qDebug() << "입력된 텍스트:" << text;
});

🔐 비밀번호 입력창처럼 만들기

QLineEdit *passwordEdit = new QLineEdit(this);
passwordEdit->setEchoMode(QLineEdit::Password);
passwordEdit->setPlaceholderText("비밀번호 입력");

→ 입력하면 ●●●● 처럼 보임

🎯 입력값 제한 예제

✔️ 숫자만 입력 받기 (`QIntValidator`)

QLineEdit *numberEdit = new QLineEdit(this);
numberEdit->setValidator(new QIntValidator(0, 9999, this));

✔️ 전화번호 포맷 등 (`setInputMask`)

QLineEdit *phoneEdit = new QLineEdit(this);
phoneEdit->setInputMask("000-0000-0000;_");  // ;_는 빈칸일 때 _로 표시

🔁 유용한 시그널

시그널	설명
`textChanged(const QString&)`	텍스트가 바뀔 때마다 호출
`editingFinished()`	엔터를 누르거나 포커스를 잃었을 때
`returnPressed()`	엔터 키 입력 시
`textEdited()`	사용자가 직접 수정했을 때만 호출 (코드로 바꾼 건 제외)

QLineEdit 위젯 : 한 줄로 된 문자열을 입력받을 때 사용. p76 참고

input masking 설정으로 입력받는 형태를 지정할 수 있음. 알파벳만 입력받거나, 숫자만 입력받거나 등등.

입력의 패턴을 명시할 수 있음.

max length 속성을 통해 최대 입력 받을 문자열 길이를 지정 가능.

echoMode 속성으로 입력 문자열을 출력하는 모드 존재.

#include "widget.h"

#include <QApplication>
#include <QLineEdit>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QLineEdit *lineEdit = new QLineEdit();
    // lineEdit->setEchoMode(QLineEdit::Password);
    lineEdit->setInputMask("000");
    lineEdit->setPlaceholderText("input the number");
    lineEdit->show();
    return a.exec();
}

inputmasking 값으로 위 사항들을 사용할 수 있다.

QCompleter 라는 클래스를 가지고 자동완성 기능 구현이 가능하다.

QCompleter QCompleter는 입력 자동완성 기능을 추가해주는 Qt 클래스.

✅ QCompleter

📌 역할:

QLineEdit이나 QComboBox 같은 위젯에 자동완성 기능을 붙여주는 클래스

입력된 텍스트를 기준으로 미리 지정된 단어 목록 중 일치하는 항목을 자동으로 추천해줌.

🧩 주요 구성

구성 요소	설명
`QCompleter`	자동완성을 처리하는 핵심 클래스
`QStringListModel`	자동완성 단어 리스트 제공 (모델로도 커스터마이징 가능)
`setCompletionMode()`	자동완성 동작 방식 설정 (popup or inline 등)
`setCaseSensitivity()`	대소문자 구분 여부 설정

✨ 기본 사용 예제

QStringList wordList = {"apple", "banana", "cherry", "grape", "orange"};

QLineEdit *lineEdit = new QLineEdit(this);

QCompleter *completer = new QCompleter(wordList, this);
completer->setCaseSensitivity(Qt::CaseInsensitive);  // 대소문자 구분 안 함
completer->setCompletionMode(QCompleter::PopupCompletion);  // 팝업 리스트

lineEdit->setCompleter(completer);

이제 사용자가 a만 입력해도 "apple"이 자동으로 뜸 🍎

🔁 CompletionMode 종류

모드	설명
`QCompleter::PopupCompletion`	드롭다운 팝업 형태로 추천 표시 (기본)
`QCompleter::InlineCompletion`	자동으로 입력란에 완성 텍스트가 표시됨
`QCompleter::UnfilteredPopupCompletion`	모든 항목을 팝업에 보여줌 (필터 없음)

💡 고급: 모델 연동

단순 문자열 리스트 말고도, QAbstractItemModel을 통해 데이터 연동 가능!

QStringListModel *model = new QStringListModel(wordList, this);
QCompleter *completer = new QCompleter(model, this);
lineEdit->setCompleter(completer);

예를 들어 QTableView에서 특정 열 데이터만 자동완성하고 싶을 때도 써!

🎯 실전 예제: 검색창 만들기

QLineEdit *searchBox = new QLineEdit(this);
searchBox->setPlaceholderText("과일 이름을 입력하세요...");

QStringList fruits = {"apple", "apricot", "banana", "blueberry", "cherry"};
QCompleter *completer = new QCompleter(fruits, this);
completer->setCaseSensitivity(Qt::CaseInsensitive);
searchBox->setCompleter(completer);

필요하면 실시간으로 DB에서 단어 가져오는 자동완성, 혹은 다국어 지원 자동완성 같은 고급 기능도 알려줄 수 있어! 지금 어디에 자동완성을 붙이려고 했어? 검색창? 명령어 입력? 😄

#include <QApplication>
#include <QLineEdit>
#include <QCompleter>
int main(int argc, char *argv[]) {
    QApplication a(argc, argv);
    QLineEdit *lineEdit = new QLineEdit( );
    QStringList CompletionList;                   // Use the string list
    CompletionList << "Bryan" << "Bart" << "Kelvin" << "Beth" << "Brad" << "Kelly" << "Austin" << "Jamal" << "KyeongYeon" << "Kangsihwan";
    QCompleter *stringCompleter = new QCompleter(CompletionList, lineEdit);
    stringCompleter->setCaseSensitivity(Qt::CaseInsensitive);
    lineEdit->setCompleter(stringCompleter);
    lineEdit->show( );
    return a.exec( );
}

QTextEdit 위젯 : 여러 줄로 된 문자열을 입력받ㅇㄹ 때 사용

QTextEdit

✅ QTextEdit

📌 역할:

여러 줄 텍스트를 입력하거나 표시하는 데 사용하는 위젯

서식 있는 텍스트(Rich Text, HTML) 도 지원하고,

간단한 메모장부터 채팅창, 로그창, 문서 편집기까지 다양하게 사용돼.

🧩 주요 특징

기능	설명
여러 줄 입력 지원	줄 바꿈(Enter), 탭, 복붙 가능
서식 텍스트 지원	HTML, 굵게/기울임 등 서식 적용 가능
평문/HTML 모드 지원	`setPlainText()`, `setHtml()`
텍스트 조작	`toPlainText()`, `append()`, `clear()` 등
읽기 전용 설정	`setReadOnly(true)`

✨ 기본 사용 예제

QTextEdit *editor = new QTextEdit(this);
editor->setPlainText("기본 텍스트 입력");      // plain text 설정
editor->setPlaceholderText("내용을 입력하세요...");

🖋 텍스트 가져오기 / 설정하기

editor->setPlainText("텍스트 설정");
QString content = editor->toPlainText();        // 현재 텍스트 가져오기

PlainText는 그냥 문자열. 서식 없이.

🎨 HTML 지원 예제

editor->setHtml("<h1>제목</h1><p><b>굵은 글씨</b>와 <i>기울임</i></p>");
QString html = editor->toHtml();                // HTML 형식으로 텍스트 가져오기

💡 추가 기능들

메서드	설명
`append("text")`	마지막 줄에 텍스트 추가 (개행 자동 포함)
`insertPlainText()`	커서 위치에 텍스트 삽입
`setTextColor(QColor)`	글자 색 바꾸기
`setFont(QFont)`	폰트 변경
`setReadOnly(true)`	읽기 전용 모드로 전환

🔁 주요 시그널

시그널	설명
`textChanged()`	텍스트가 변경되면 발생
`cursorPositionChanged()`	커서 위치가 바뀌면 발생

📌 QLineEdit vs QTextEdit

항목	QLineEdit	QTextEdit
줄 수	한 줄	여러 줄
서식 지원	❌ 평문만	✅ HTML, 서식 지원
용도	이름, 검색창 등	채팅, 메모, 문서 등

✨ 실전 예제: 채팅창 로그 출력

QTextEdit *chatLog = new QTextEdit(this);
chatLog->setReadOnly(true);     // 사용자는 편집 불가

// 메시지 추가할 때
chatLog->append("사용자1: 안녕하세요!");
chatLog->append("사용자2: 반갑습니다 :)");

서식이 있는 텍스트 입력을 받기 위해 사용

HTML형식이나 문서형식으로 쉽게 변경 가능.

텍스트 편집기같은 느낌으로 생각하면 쉽다.

문서편집기 만들 때 이 위젯 쓰면 됨.

QComboBox

여러 옵션 중 하나 값을 선택할 때 사용

드롭다운 리스트와 함께 작은 버튼 제공

setEditable(true) 메소드를 이용해서 옵션값 추가 입력가능

item이 너무 많으면 콤보박스 사용해도 화면을 넘겨버리는 문제 발생.

성격에 따라 나눠서 여러 콤보박스를 사용하는 등 활용 필요함.

#include "widget.h"

#include <QApplication>
#include <QComboBox>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QComboBox *comboBox = new QComboBox();
    comboBox->addItem("Qt");
    comboBox->addItem("Gnome");
    comboBox->addItem("asdf");
    comboBox->addItem("qwer");
    comboBox->addItem("zxcv");
    comboBox->setEditable(true);
    comboBox->show();

    return a.exec();
}

Layout : 다양한 형태 위젯들을 어떤 형태로 구조화할것인지에 도움이 되는 클래스

Layout Layout을 잘 이해하면 버튼, 라벨, 입력창 같은 위젯들을 화면에 예쁘고 유동적으로 배치할 수 있어.

✅ Layout이란?

위젯들의 위치와 크기를 자동으로 조절해주는 시스템

창 크기가 바뀌거나, 위젯이 추가/제거되어도 알아서 정렬되게 해줘.

🧩 주요 Layout 클래스들

클래스	설명
`QVBoxLayout`	위에서 아래로 수직 배치
`QHBoxLayout`	왼쪽에서 오른쪽으로 수평 배치
`QGridLayout`	표처럼 행/열로 배치
`QFormLayout`	라벨-위젯 쌍으로 입력 폼 만들기
`QStackedLayout`	여러 위젯을 겹쳐 놓고 하나씩만 보여줌 (탭, 페이지 전환 등)

✨ 기본 사용 예제

수직 레이아웃 (QVBoxLayout)

QVBoxLayout *layout = new QVBoxLayout(this);
layout->addWidget(new QLabel("이름"));
layout->addWidget(new QLineEdit());
layout->addWidget(new QPushButton("확인"));

→ 위젯들이 위에서 아래로 쭉 정렬됨

🔧 Layout 설정 방법

QWidget 또는 QGroupBox 등 위젯에 setLayout()으로 적용

레이아웃 안에 위젯이나 다른 레이아웃을 addWidget(), addLayout()으로 추가

QHBoxLayout *hbox = new QHBoxLayout();
hbox->addWidget(new QPushButton("이전"));
hbox->addWidget(new QPushButton("다음"));

QVBoxLayout *mainLayout = new QVBoxLayout(this);
mainLayout->addLayout(hbox);  // 다른 레이아웃도 포함 가능

🪄 유용한 기능들

기능	메서드
간격 조절	`setSpacing(int)`
여백 설정	`setContentsMargins(left, top, right, bottom)`
빈 공간 추가	`addStretch()` 또는 `addSpacerItem()`
정렬 조정	`addWidget(widget, 0, Qt::AlignCenter)`

📌 Layout 없이 수동 배치도 가능?

가능은 해. 위젯에 직접 setGeometry() 써서 위치와 크기 지정할 수 있어.

하지만 반응형 UI, 다국어 대응, 창 리사이즈 대응 불가 → 거의 쓰지 않음 ❌

✅ 요약 정리

개념	설명
Layout	위젯 배치를 자동으로 관리해주는 시스템
종류	VBox, HBox, Grid, Form 등 다양
사용법	`setLayout()`, `addWidget()`, `addLayout()` 등
장점	반응형 UI 가능, 코드 간결함, 유지보수 쉬움
팁	한 위젯에 `setLayout()`은 딱 한 번만!

진짜 Qt UI 짤 땐 무조건 레이아웃이랑 친해져야 해 😎

혹시 지금 실습 중인 화면이 있으면 레이아웃 구조 같이 짜줄까?

원하는 배치 말만 해줘!

QHBoxLayout

QVBoxLayout

QGridLayout

QFormLayout

중첩된 레이아웃 사용

중첩된 레이아웃?

✅ 하나의 윈도우 안에서 여러 종류의 레이아웃을 "겹쳐서" 사용할 수 있다는 뜻!

📦 중첩된 레이아웃이란?

레이아웃 안에 또 다른 레이아웃을 넣는 것

즉, QVBoxLayout 안에 QHBoxLayout, QGridLayout 등 다양한 레이아웃을 하위 구성 요소처럼 조립해서 화면을 구성하는 방식이야.

🧩 예시 구조 (직관적으로!)

Main Window (QVBoxLayout)
├── QLabel("제목")
├── QHBoxLayout
│   ├── QPushButton("이전")
│   └── QPushButton("다음")
├── QGridLayout (2x2 버튼)
│   ├── QPushButton("1") ...

이런 식으로 VBox가 전체 구조, 그 안에 HBox (가로 정렬 버튼들), 또 그 밑에 Grid (표처럼 정렬) 이렇게 중첩 가능해!

✨ 코드 예시

QVBoxLayout *mainLayout = new QVBoxLayout(this);    // 메인 수직 레이아웃

QLabel *label = new QLabel("중첩된 레이아웃 예제");
mainLayout->addWidget(label);

// 가로 레이아웃
QHBoxLayout *hBox = new QHBoxLayout;
hBox->addWidget(new QPushButton("이전"));
hBox->addWidget(new QPushButton("다음"));
mainLayout->addLayout(hBox);   // 수직 레이아웃 안에 추가

// 그리드 레이아웃
QGridLayout *grid = new QGridLayout;
grid->addWidget(new QPushButton("1"), 0, 0);
grid->addWidget(new QPushButton("2"), 0, 1);
grid->addWidget(new QPushButton("3"), 1, 0);
grid->addWidget(new QPushButton("4"), 1, 1);
mainLayout->addLayout(grid);  // 여기도 추가!

💡 중첩 레이아웃의 장점

장점	설명
구조적 UI 구성	UI를 블록처럼 조립해서 관리
유지보수 쉬움	한 부분만 수정해도 전체 깨지지 않음
창 크기 변경 대응	레이아웃끼리 알아서 위치/크기 조절

위젯들을 배치하고 윈도우 크기를 조정하는 메소드

x, y, pos, frameGeometry, move, setGeometry 등

레이아웃 클래스를 활용하자.

마진 : 레이아웃 내 위젯과 레이아웃 바깥족 외곽과의 여백

간격(spacing) : 레이아웃 내 위젯과 위젯 간 간격

배치와 관련된 맴버함수 중 스페이스와 마진에 대한 내용 잘 기억하자.

교재에도 설명이 나와있음.

QBoxLayout.

#include "widget.h"
#include <QGridLayout>
#include <QPushButton>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    QGridLayout *gridLayout = new QGridLayout;
    QPushButton *pushButton[3 * 3];
    for (int y = 0; y < 3; y++)
    {
        for (int x = 0 ; x < 3 ; x++)
        {
            int p =x + y * 3;
            QString str = QString("Button%1").arg(p+1);
            pushButton[p] = new QPushButton(str,this);
            gridLayout->addWidget(pushButton[p], x, y);
        }
    }
    setLayout(gridLayout);
}

Widget::~Widget() {}

그리드 레이아웃을 통해 행렬느낌으로 버튼들을 배치해보자.

나우히즈

이전 포스트

[VEDA] QT programming 1

다음 포스트

[VEDA] QT Programming 2

VEDA

✅ 해결 방법: addButton 시, ID를 명시적으로 설정

QRadioButton

🔹 목적

🔹 QCheckBox와의 차이

🔹 기본적으로 exclusive한 성격을 가짐

📌 예시 코드

🎯 혹은 QButtonGroup으로 명확하게 그룹 관리도 가능

✅ QDate 클래스

📌 역할:

📅 기능:

✨ 예제:

✅ QDateEdit 위젯

📌 역할:

🧩 특징:

✨ 예제:

🔁 QDate와 QDateEdit 관계

✅ QTime 클래스

📌 역할:

🕐 주요 기능:

✨ 예제:

✅ QTimeEdit 위젯

📌 역할:

🧩 특징:

✨ 예제:

🔁 QTime 과 QTimeEdit 관계

✅ 실습 예: 입력한 시간 표시

✅ QDateTime 클래스

📌 역할:

🕰 기능:

✨ 예제:

✅ QDateTimeEdit 위젯

📌 역할:

🧩 특징:

✨ 예제:

🔁 QDateTime vs QDate/QTime

🧪 예제: 입력된 날짜와 시간 출력

✅ QScrollArea

📌 역할:

🔹 특징:

✨ 예제:

✅ QScrollBar

📌 역할:

✨ 예제:

✅ QDial

📌 역할:

🔹 특징:

✨ 예제:

✅ QSpinBox

📌 역할:

🧩 주요 특징

✨ 기본 사용 예제

🧩 유용한 설정들

✅ QDoubleSpinBox 도 있어!

✅ QLineEdit

📌 역할:

🧩 주요 기능들

✨ 기본 사용 예제

🔐 비밀번호 입력창처럼 만들기

🎯 입력값 제한 예제

✔️ 숫자만 입력 받기 (QIntValidator)

✔️ 전화번호 포맷 등 (setInputMask)

🔁 유용한 시그널

📌 역할:

🧩 주요 구성

✨ 기본 사용 예제

🔁 CompletionMode 종류

💡 고급: 모델 연동

🎯 실전 예제: 검색창 만들기

✅ QTextEdit

📌 역할:

🧩 주요 특징

✨ 기본 사용 예제

🖋 텍스트 가져오기 / 설정하기

🎨 HTML 지원 예제

💡 추가 기능들

🔁 주요 시그널

📌 QLineEdit vs QTextEdit

✨ 실전 예제: 채팅창 로그 출력

✅ `QScrollArea`

✅ `QScrollBar`

✅ `QDial`

✅ `QDoubleSpinBox` 도 있어!

✔️ 숫자만 입력 받기 (`QIntValidator`)

✔️ 전화번호 포맷 등 (`setInputMask`)