Qt 커스텀 위젯 사용하기

키오스크에는 여러 메뉴가 존재합니다. 이 메뉴를 보여주기 위해서는 메뉴 사진, 이름, 가격을 보여줘야 합니다.

 

메뉴에 필요한 위젯을 하나로 묶어서 사용하기 위해 ui파일을 따로 만들어 사용하려고 합니다.

 

QTCreator에서 new FIle > Files and Classes > Qt > Qt Designer Form Class 를 선택합니다.

Form Templated에서 Widget을 선택합니다.

mymenu.ui에 이미지, 이름, 가격을 넣을 QLabel 3개를 넣어주었습니다.

저장 후 메인 Ui로 넘어와 Widget을 하나 끌어다 놓아줍니다. 

Widget에 우클릭을 해 Promoted to.. 를 눌러 아래 창을 띄워줍니다.

 

Promoted class name에 만든 ui 이름을 적어주고 Add를 눌러준 다음 Promote를 클릭합니다.

이제 Widget을 두개를 놓고 Debug 후 실행을 합니다.

mymenu가 제대로 출력이 되는 것을 확인할 수 있습니다.

이제 Mainwindow.cpp에서 MyMenu의 label을 수정하는 방법입니다.

 

Mainwindows.cpp에서 widget안에 label에 직접 접근이 안되니 MyMenu에 set 함수를 추가합니다.

Mymenu.h

#ifndef MYMENU_H
#define MYMENU_H

#include <QWidget>

namespace Ui {
class MyMenu;
}

class MyMenu : public QWidget
{
    Q_OBJECT

public:
    explicit MyMenu(QWidget *parent = nullptr);
    ~MyMenu();
    void setImage(QPixmap pixmap);
    void setName(QString name);
    void setPrice(QString price);

private:
    Ui::MyMenu *ui;
};

#endif // MYMENU_H

Mymenu.cpp

#include "mymenu.h"
#include "ui_mymenu.h"

MyMenu::MyMenu(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::MyMenu)
{
    ui->setupUi(this);
}

MyMenu::~MyMenu()
{
    delete ui;
}

void MyMenu::setImage(QPixmap pixmap)
{
    ui->label->setPixmap(pixmap.scaled(128,128,Qt::KeepAspectRatio));
}
void MyMenu::setName(QString name)
{
    ui->label_2->setText(name);
}
void MyMenu::setPrice(QString price)
{
    ui->label_3->setText(price);
}

다음으로 MainWindow.h입니다.

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = nullptr);
    ~MainWindow();
    
private:
    Ui::MainWindow *ui;

};

#endif // MAINWINDOW_H

MainWindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    QPixmap burgerpicture;
    burgerpicture.load("/home/pi/kiosk/image/빅맥.png");
    ui->widget->setImage(burgerpicture);
    ui->widget->setName("빅맥");
    ui->widget->setPrice("5000");

}

MainWindow::~MainWindow()
{
    delete ui;
}

마지막으로 실행 결과입니다.