En este pequeño tutorial crearemos una calculadora usando kivy nuestra biblioteca para crear interfaces gráficas en python, como ya sabemos kivy es muy fácil de usar y de implementar.
Este sera un tutorial dirigido a todas las personas que están empezando a programar en python y quieren empezar a crear pequeños proyectos que son fáciles pero te ayudan a entender la lógica de programación en python.
Este sera un tutorial dirigido a todas las personas que están empezando a programar en python y quieren empezar a crear pequeños proyectos que son fáciles pero te ayudan a entender la lógica de programación en python.
Requisitos para el tutorial
- Tener instalado python (en este caso de preferencia cualquier versión que sea superior a 3.0)
- Tener instalado kivy y sus dependencias
- Tener ganas de aprender.
Antes de empezar crearemos dos archivos el primero se llamara main.py y el segundo calculadora.kv
El archivo main.py es el principal donde crearemos las función que se encargue de crear las operaciones, además ahí agregaremos el código encargado de crear la aplicación. El archivo calculadora.kv es donde agregaremos comandos en lenguaje kv el lenguaje encargado de crear los gráficos(no significa que no los podamos crear en el archivo main.py es simplemente para hacerlo de forma ordenada.)
En nuestro archivo main.py agregamos.
He dejado comentarios en todo el código con una breve explicación de lo que estamos haciendo, no es necesario que escribas eso, es mas escribe todo el código y después agrega comentarios usando tus propias palabras.
Ahora abrimos nuestro archivo calculadora.kv y agregamos el siguiente código.
#:kivy 1.0
#:import kivy kivy
<CustButton@Button>:
font_size: 32
color: 1, 1, 1, 1
<calculadora_screen>:
size:self.size
id:My_Calc
display: entry
padding: 3
spacing: 5
rows: 6
BoxLayout:
TextInput:
id: entry
font_size: 32
multiline: False
BoxLayout:
spacing: 6
CustButton:
text: "7"
on_press:entry.text += self.text
CustButton:
text: "8"
on_press:entry.text += self.text
CustButton:
text: "9"
on_press:entry.text += self.text
CustButton:
text: "*"
on_press:entry.text += self.text
BoxLayout:
spacing:6
CustButton:
text: "4"
on_press:entry.text += self.text
CustButton:
text: "5"
on_press:entry.text += self.text
CustButton:
text: "6"
on_press:entry.text += self.text
CustButton:
text: "/"
on_press:entry.text += self.text
BoxLayout:
spacing: 6
CustButton:
text: "1"
on_press:entry.text += self.text
CustButton:
text: "2"
on_press:entry.text += self.text
CustButton:
text: "3"
on_press:entry.text += self.text
CustButton:
text: "-"
on_press:entry.text += self.text
BoxLayout:
spacing: 6
CustButton:
text: "AC"
on_press:entry.text =""
CustButton:
text: "0"
on_press:entry.text += self.text
CustButton:
text: "="
on_press: My_Calc.calculate(entry.text)
CustButton:
text: "+"
on_press:entry.text += self.text
Explicación que pasa en el archivo calculadora.kv
Primero creamos un botón personalizado donde nos aseguramos que todos los botones tengan las mismas propiedades como por ejemplo: color de texto, tamaño de texto, estilo de texto y otros. Esto lo hacemos de esta forma:
Ahora nos encargaremos de hacer referencia de nuestro clase calculadora_screen.
Si ves con detalle nuestro código en el archivo main.py estamos usando un layout llamado GridLayout. donde ordenamos todo mediante la declaración de en cuantas columnas o filas se dividirá nuestra pantalla o área de trabajo. si quieres saber mas aserca de esto visita nuestro post tipos de layout en kivy, donde explicamos con mas detalle lo anterior.
Sabiendo ya que es un GridLayout le agregamos un id: My_Calc además propiedades display: entry que nos servirá para poder agregar los números a la pantalla, también definimos en numero de filas que tendrá nuestro layout rows: 6 y simplemente para que nuestra app se mire bonita agregamos padding: 3 (Espacio entre cada widget) y spacing: 5 (Espacio entre widget y el borde de la pantalla).
Ya definido como se comportara nuestro GridLayout, Usamos 5 BoxLayout que tomaran lugar en cada una de las filas que tenemos disponible, esto lo hacemos de arriba hacia abajo.
En el primer BoxLayout agregamos nuestro cuadro de texto/TextInput que es donde aparecerá nuestros números cada ves que presionemos un botón además ahí veremos el resultado de todas las operaciones que realicemos. definiendo el id: entry, el tamaño del texto font_size: 32 y multiline: False para que nuestro TextInput tenga una sola linea.
ejemplo:
De esta forma nuestra calculadora debería funcionar a la perfección, Espero que disfrutes esta entrada, cualquier duda o inquietud déjame saberlo comentando. Gracias.
Si notas todo el código cada ves que agregue un botón use mi botón personalizado CustButton.
<CustButton@Button>:
font_size: 32
color: 1, 1, 1, 1
Ahora nos encargaremos de hacer referencia de nuestro clase calculadora_screen.
<calculadora_screen>:
size:self.size
id:My_Calc
display: entry
padding: 3
spacing: 5
rows: 6
Si ves con detalle nuestro código en el archivo main.py estamos usando un layout llamado GridLayout. donde ordenamos todo mediante la declaración de en cuantas columnas o filas se dividirá nuestra pantalla o área de trabajo. si quieres saber mas aserca de esto visita nuestro post tipos de layout en kivy, donde explicamos con mas detalle lo anterior.
Sabiendo ya que es un GridLayout le agregamos un id: My_Calc además propiedades display: entry que nos servirá para poder agregar los números a la pantalla, también definimos en numero de filas que tendrá nuestro layout rows: 6 y simplemente para que nuestra app se mire bonita agregamos padding: 3 (Espacio entre cada widget) y spacing: 5 (Espacio entre widget y el borde de la pantalla).
Ya definido como se comportara nuestro GridLayout, Usamos 5 BoxLayout que tomaran lugar en cada una de las filas que tenemos disponible, esto lo hacemos de arriba hacia abajo.
En el primer BoxLayout agregamos nuestro cuadro de texto/TextInput que es donde aparecerá nuestros números cada ves que presionemos un botón además ahí veremos el resultado de todas las operaciones que realicemos. definiendo el id: entry, el tamaño del texto font_size: 32 y multiline: False para que nuestro TextInput tenga una sola linea.
BoxLayout:Tiendo ya esto empezamos a agregar los botones, agregando 4 por cada BoxLayout
TextInput:
id: entry
font_size: 32
multiline: False
ejemplo:
Cada botón tendrá propiedad text donde agregamos el numero que corresponde y propiedad on_press donde agregamos una pequeña formula entry.text += self.text que lo que hará es usar lo que tengamos en la propiedad text ejemplo text: "7" y lo agregamos a nuestra a entry.text (recuerda entry es el id de nuestro TextInput).
BoxLayout:
spacing: 6
CustButton:
text: "7"
on_press:entry.text += self.text
De esta forma nuestra calculadora debería funcionar a la perfección, Espero que disfrutes esta entrada, cualquier duda o inquietud déjame saberlo comentando. Gracias.
Excelente
ResponderEliminarMe ha ayudado mucho.
Gracias
hola, llegué a transcribir los códigos en mi VSC que lo abrí desde Anaconda, generé un entorno virtual, instalé Kivy según propone Anaconda con " conda install -c conda-forge kivy" , y traté de ejecutar los sripts main.py y calculadora.kv ; solo que no me queda claro cual deba de ejecutar y como hacerlo, si me podrías orientar, quedo atento, gracias!
ResponderEliminar