계산기 양식

계산기 폼 예제는 QWidget 서브클래스의 사용자 인터페이스 정보를 사용하여 애플리케이션에서 Qt Widgets Designer 으로 만든 폼을 사용하는 방법을 보여줍니다.

이 예제에서는 정수 값을 입력하는 데 사용되는 두 개의 스핀 박스와 그 합계를 표시하는 레이블을 제공합니다. 스핀 박스 중 하나가 업데이트될 때마다 위젯과 폼 사이의 신호 슬롯 연결을 통해 레이블도 업데이트됩니다.

준비

이 예제의 사용자 인터페이스는 Qt Widgets Designer 을 사용하여 완전히 디자인되었습니다. 그 결과 양식, 사용된 위젯, 위젯 간의 신호 슬롯 연결 및 기타 표준 사용자 인터페이스 속성을 설명하는 UI 파일이 생성됩니다.

이 예제에서 이 파일을 사용할 수 있도록 하기 위해 CMAKE_AUTOUIC 기능을 활성화하고 소스 파일에 UI 파일을 나열합니다:

set(CMAKE_AUTOUIC ON)

qt_add_executable(calculatorform
    calculatorform.cpp calculatorform.h calculatorform.ui
    main.cpp
)

qmake 의 경우 예제의 프로젝트 파일에 FORMS 선언을 포함해야 합니다:

FORMS       = calculatorform.ui

프로젝트가 빌드되면 uic 에서 폼을 구성할 수 있는 헤더 파일을 생성합니다.

CalculatorForm 클래스 정의

CalculatorForm 클래스는 calculatorform.ui 파일에 설명된 사용자 인터페이스를 사용합니다. 양식과 그 내용에 액세스하려면 빌드 프로세스 중에 uic 에서 만든 ui_calculatorform.h 헤더 파일을 포함해야 합니다:

#include "ui_calculatorform.h"

양식 자체는 QWidget 을 기반으로 하기 때문에 QWidget 을 서브클래싱하여 CalculatorForm 클래스를 정의합니다:

class CalculatorForm : public QWidget
{
    Q_OBJECT

public:
    explicit CalculatorForm(QWidget *parent = nullptr);

private slots:
    void updateResult();

private:
    Ui::CalculatorForm ui;
};

생성자 외에도 클래스에는 계산을 수행하고 그에 따라 출력 위젯을 업데이트하는 비공개 슬롯 updateResult() 이 포함되어 있습니다. 비공개 ui 멤버 변수는 폼을 참조하며 사용자 인터페이스의 콘텐츠에 액세스하는 데 사용됩니다.

계산기 폼 클래스 구현

생성자는 기본 클래스의 생성자를 호출하고 폼의 사용자 인터페이스를 설정한 다음 QSpinBox::valueChanged() 신호를 updateResult() 슬롯에 연결하기만 하면 됩니다.

CalculatorForm::CalculatorForm(QWidget *parent)
    : QWidget(parent)
{
    ui.setupUi(this);
    connect(ui.inputSpinBox1, &QSpinBox::valueChanged, this, &CalculatorForm::updateResult);
    connect(ui.inputSpinBox2, &QSpinBox::valueChanged, this, &CalculatorForm::updateResult);
}

사용자 인터페이스는 setupUI() 함수로 설정됩니다. CalculatorForm 위젯 자체를 사용자 인터페이스의 컨테이너로 사용하기 위해 이 함수에 this 을 인수로 전달합니다.

updateResult() 슬롯은 값을 추가하고 결과를 출력 위젯에 설정합니다:

void CalculatorForm::updateResult()
{
    const int sum = ui.inputSpinBox1->value() + ui.inputSpinBox2->value();
    ui.outputWidget->setText(QString::number(sum));
}

이 함수는 스핀 박스 중 하나의 값이 변경될 때마다 호출됩니다.

예제 프로젝트 @ code.qt.io