En este tutorial explicamos cómo conectar el click de un botón a la lógica del código. Usando Pyqt5 en Python, con un Qt pushbutton, el cual es un botón sencillo (qt button).
Introducción.
La librería PyQt5, nos ayuda a crear interfaces graficas en Python.
Existe una herramienta llamada Qt Designer, en la cual podemos diseñar de forma visual nuestra interfaz gráfica, generar un código y abrirlo en Python. Lo cual nos facilita mucho el diseño de nuestra interfaz.
Te recomendamos algunos tutoriales, si quieres saber más sobre QT Designer.
Resumen del tutorial.
En este tutorial vamos a suponer que ya tenemos la siguiente interfaz gráfica que consta de un texto y un botón.
Cuando el Usuario presione el botón, el Texto va a mostrar “El botón se presionó”. Así de simple.
El código es el siguiente, lo que está en negritas es lo que se necesita para ejecutar la acción cuando el usuario hace click en el botón (qt pushbutton).
from boton_ui import *
from PyQt5 import QtWidgets
import sys
class VentanaPrincipal(QtWidgets.QMainWindow, Ui_MainWindow):
def __init__(self, *args, **kwargs):
QtWidgets.QMainWindow.__init__(self, *args, **kwargs)
self.setupUi(self)
self.btn1.clicked.connect(self.onclick)
def onclick (self):
self.txt1.setText("El botón se presionó ")
if __name__ == "__main__":
app = QtWidgets.QApplication([])
window = VentanaPrincipal()
window.show()
app.exec_()
Detectar cuando el usuario presiona un botón Python (Qt button clicked).
Tenemos un botón (qt pushbutton) y un texto (Label), cuando el usuario presiona el botón en el Label mostraremos “El botón se presionó”.
El archivo de nuestra UI se llama: “boton_ui.py”
La ID o nombre del Label es: txt1
La ID o nombre del Push Button es: btn1
Diseñando la interfaz con un Qt pushbutton y un Label.
Primero necesitamos tener nuestra interfaz gráfica ya diseñada. En este caso la diseñamos con Qt Designer.
Esa Ui se genera en un archivo con extensión “.ui”. La convertimos a “.py” para poder abrirla en Python, puedes ver el tutorial: Qt Designer Python.
Y después abrimos la Ui, escribiendo el siguiente código en Python.
from boton_ui import *
from PyQt5 import QtWidgets
import sys
class VentanaPrincipal(QtWidgets.QMainWindow, Ui_MainWindow):
def __init__(self, *args, **kwargs):
QtWidgets.QMainWindow.__init__(self, *args, **kwargs)
self.setupUi(self)
if __name__ == "__main__":
app = QtWidgets.QApplication([])
window = VentanaPrincipal()
window.show()
app.exec_()
Click sobre el botón (Qt button clicked).
Para saber cuándo el usuario presiona el botón, se unas el comando “.clicked.connect()”, y llamamos a la función que realiza la acción que queremos ejecutar.
from boton_ui import *
from PyQt5 import QtWidgets
import sys
class VentanaPrincipal(QtWidgets.QMainWindow, Ui_MainWindow):
def __init__(self, *args, **kwargs):
QtWidgets.QMainWindow.__init__(self, *args, **kwargs)
self.setupUi(self)
self.btn1.clicked.connect(self.onclick)
def onclick (self):
self.txt1.setText("El botón se presionó ")
if __name__ == "__main__":
app = QtWidgets.QApplication([])
window = VentanaPrincipal()
window.show()
app.exec_()
Vemos que llamamos a la clase VentanaPrincipal(), la cual se inicializa heredando las propiedades Ui_MainWindow, que es el archivo “boton_ui.py”.
Cuando se inicializa, agregamos el comando para detectar cuando se hace click en el botón.
self.btn1.clicked.connect(self.onclick)
Donde:
- Self, se refiere a la VentanaPrincipal.
- Btn1, recuerda que la ID o nombre del botón.
- .clicked.connect, es el comando que conecta el botón de la UI con el código en Python.
- “self.onclik”, en la función que llamaremos, el self indica que está dentro de la misma clase.
Luego, cuando el usuario presión el botón nos enviará a la función “onclick”, puedes darle el nombre que desees a esta función.
Dentro de la función “onclick” solo cambiamos el texto de Label, dándole el valor de “El botón se presionó “.
self.txt1.setText("El botón se presionó ")Donde:
- Self, se refiere a la VentanaPrincipal.
- txt1, recuerda que la ID o nombre del Label.
- .setText, es el comando con el que se escribe el texto del Label.
- “El botón se presionó”, es el texto a mostrar.
Así se ve la Ui cuando presionamos el Qt pushbutton.
El texto no se muestra completo, es porque en la Ui dimos muy poco espacio. Lo dejamos asi para que veas un error que te puede pasar, solo es cuestión de hacer más grande el espacio del Label en Qt designer.
Para más tutoriales puedes ir a la sección de Python.