[Python] PyQt 응용/계산기 만들기 - 이미지 넣기, 버튼에 이미지

2021.11.04 - [Python/PyQt응용] - [Python] PyQt 응용/계산기 만들기 - 사칙연산 입력 및 계산 함수 만들기

 

윈도우 계산기랑 비슷하게 만들기 위해서 버튼에 이미지를 삽입할 것이다

 

1. button버튼에 setStyleSheet를 추가한다

self.btn_1.setStyleSheet('border-image:url(./image/1.PNG);border:0px;')

이미지 경로는 프로젝트 폴더네에 있는 image폴더에 1.PNG를 적용하고 이미지 간격은 0px로 줬다

 

2. 버튼에 이미지를 넣을 거라 이전에 만들어놓은 ui에서 텍스트를 지운다

3. QDialog에 styleSheet를 설정한다: background-color: rgb(194, 194, 194);

 

4. 전체 코드

    def initUI(self):
        self.setupUi(self)
        self.btn_1.clicked.connect(self.button_1)  # 버튼 클릭시 연결되는 함수
        self.btn_2.clicked.connect(self.button_2)
        self.btn_3.clicked.connect(self.button_3)
        self.btn_4.clicked.connect(self.button_4)
        self.btn_5.clicked.connect(self.button_5)
        self.btn_6.clicked.connect(self.button_6)
        self.btn_7.clicked.connect(self.button_7)
        self.btn_8.clicked.connect(self.button_8)
        self.btn_9.clicked.connect(self.button_9)
        self.btn_0.clicked.connect(self.button_0)
        self.btn_del.clicked.connect(self.del_num)
        self.btn_plus.clicked.connect(self.plus)
        self.btn_minus.clicked.connect(self.minus)
        self.btn_divide.clicked.connect(self.divide)
        self.btn_multiplication.clicked.connect(self.multiple)
        self.btn_result.clicked.connect(self.result)
        self.btn_percent.clicked.connect(self.percent)
        self.btn_C.clicked.connect(self.C)
        self.btn_CE.clicked.connect(self.CE)
        self.btn_1_x.clicked.connect(self.one_x)
        self.btn_x_2.clicked.connect(self.x_2)
    
    #   image처리
        self.btn_1.setStyleSheet('border-image:url(./image/1.PNG);border:0px;')
        self.btn_2.setStyleSheet('border-image:url(./image/2.PNG);border:0px;')
        self.btn_3.setStyleSheet('border-image:url(./image/3.PNG);border:0px;')
        self.btn_4.setStyleSheet('border-image:url(./image/4.PNG);border:0px;')
        self.btn_5.setStyleSheet('border-image:url(./image/5.PNG);border:0px;')
        self.btn_6.setStyleSheet('border-image:url(./image/6.PNG);border:0px;')
        self.btn_7.setStyleSheet('border-image:url(./image/7.PNG);border:0px;')
        self.btn_8.setStyleSheet('border-image:url(./image/8.PNG);border:0px;')
        self.btn_9.setStyleSheet('border-image:url(./image/9.PNG);border:0px;')
        self.btn_0.setStyleSheet('border-image:url(./image/0.PNG);border:0px;')
        self.btn_del.setStyleSheet('border-image:url(./image/del.PNG);border:0px;')
        self.btn_plus.setStyleSheet('border-image:url(./image/plus.PNG);border:0px;')
        self.btn_minus.setStyleSheet('border-image:url(./image/minus.PNG);border:0px;')
        self.btn_divide.setStyleSheet('border-image:url(./image/divide.PNG);border:0px;')
        self.btn_multiplication.setStyleSheet('border-image:url(./image/multiple.PNG);border:0px;')
        self.btn_result.setStyleSheet('border-image:url(./image/result.PNG);border:0px;')
        self.btn_percent.setStyleSheet('border-image:url(./image/percent.PNG);border:0px;')
        self.btn_CE.setStyleSheet('border-image:url(./image/CE.PNG);border:0px;')
        self.btn_C.setStyleSheet('border-image:url(./image/C.PNG);border:0px;')
        self.btn_del.setStyleSheet('border-image:url(./image/del.PNG);border:0px;')
        self.btn_1_x.setStyleSheet('border-image:url(./image/1x.PNG);border:0px;')
        self.btn_x_2.setStyleSheet('border-image:url(./image/x2.PNG);border:0px;')
        self.btn_root.setStyleSheet('border-image:url(./image/root.PNG);border:0px;')
        self.btn_sign.setStyleSheet('border-image:url(./image/+-.PNG);border:0px;')
        self.btn_dot.setStyleSheet('border-image:url(./image/dot.PNG);border:0px;')
        self.lineEdit.setStyleSheet('border-image:url(./image/back.PNG);border:0px;')
        self.lineEdit_2.setStyleSheet('border-image:url(./image/back.PNG);border:0px;')

 

5. 실행화면

 

https://youtu.be/XV8wNJDm0WU

 

버튼 이미지도 비슷하게 만들어졌다 세세한 기능은 넘어가고 실행파일로 변환하여 내가 만든 계산기를 사용할 수 있게 만들 예정이다.