Python | Diseño de cuadrícula en Kivy sin archivo .kv

Kivy es una plataforma independiente, ya que se puede ejecutar en Android, IOS, Linux y Windows, etc. Kivy le brinda la funcionalidad de escribir el código una vez y ejecutarlo en diferentes plataformas. Básicamente se usa para desarrollar la aplicación de Android, pero no significa que no se pueda usar en aplicaciones de escritorio.
 

????????? Tutorial de Kivy: aprenda Kivy con ejemplos .

Diseño de cuadrícula:
 

  • El widget debe colocarse en una columna/fila específica. A cada niño se le asigna automáticamente una posición determinada por la configuración del diseño y el índice del niño en la lista de niños.
  • Grid Layout siempre debe contener cualquiera de las siguientes restricciones de entrada: 
    GridLayout.cols o GridLayout.rows. Si no especifica columnas o filas, el diseño generará una excepción.
  • GridLayout organiza a los niños en una array. Toma el espacio disponible y lo divide en columnas y filas, luego agrega widgets a las «celdas» resultantes.
  • La fila y las columnas son como las que observamos en una array, aquí podemos ajustar el tamaño de cada cuadrícula.
  • El tamaño inicial viene dado por las propiedades col_default_width y row_default_height. Podemos forzar el tamaño predeterminado configurando la propiedad col_force_default o row_force_default. Esto obligará al diseño a ignorar las propiedades width y size_hint de los niños y usar el tamaño predeterminado.

Lo primero que debemos hacer para usar un GridLayout es importarlo. 
 

from kivy.uix.gridlayout import GridLayout 

Enfoque básico para crear GridLayout: 
 

1) import kivy
2) import kivyApp
3) import button
4) import Gridlayout
5) Set minimum version(optional)
6) create App class:
          - define build function
              : add widget (Buttons)
7) return Layout/widget/Class(according to requirement)
8) Run an instance of the class

  
Implementación del enfoque –
Código n.º 1: 
en el siguiente ejemplo, todos los widgets tendrán el mismo tamaño. De forma predeterminada, size_hint es (1, 1), por lo que un Widget tomará el tamaño completo del padre: 
 

Python3

# Sample Python application demonstrating 
# How to create GridLayout in Kivy
 
# import kivy module
import kivy
   
# base Class of your App inherits from the App class.  
# app:always refers to the instance of your application  
from kivy.app import App
   
# creates the button in kivy 
# if not imported shows the error 
from kivy.uix.button import Button
 
# The GridLayout arranges children in a matrix.
# It takes the available space and
# divides it into columns and rows,
# then adds widgets to the resulting “cells”.
from kivy.uix.gridlayout import GridLayout
 
# creating the App class
class Grid_LayoutApp(App):
 
    # to build the application we have to
    # return a widget on the build() function.
    def build(self):
 
        # adding GridLayouts in App
        # Defining number of column
        # You can use row as well depends on need
        layout = GridLayout(cols = 2)
 
        # 1st row
        layout.add_widget(Button(text ='Hello 1'))
        layout.add_widget(Button(text ='World 1'))
 
        # 2nd row
        layout.add_widget(Button(text ='Hello 2'))
        layout.add_widget(Button(text ='World 2'))
 
        # 3rd row
        layout.add_widget(Button(text ='Hello 3'))
        layout.add_widget(Button(text ='World 3'))
 
        # 4th row
        layout.add_widget(Button(text ='Hello 4'))
        layout.add_widget(Button(text ='World 4'))
 
        # returning the layout
        return layout
 
# creating object of the App class
root = Grid_LayoutApp()
# run the App
root.run()

Producción: 
 

Ahora simplemente cambie el código de clase en el código anterior con el código n. ° 2 y el código n. ° 3, excepto que todo será igual que el código n. ° 1 y ejecute el código después de los cambios, obtendrá los resultados a continuación. 
Código n.° 2: 
Ahora, fijemos el tamaño de los botones de Hola a 100 px en lugar de usar size_hint_x=1:
 

Python3

# creating the App class
class Grid_LayoutApp(App):
 
    # to build the application we have to
    # return a widget on the build() function.
    def build(self):
 
        # adding GridLayouts in App
        # Defining number of column
        # You can use row as well depends on need
        layout = GridLayout(cols = 2)
 
        # 1st row
        layout.add_widget(Button(text ='Hello 1', size_hint_x = None, width = 100))
        layout.add_widget(Button(text ='World 1'))
 
        # 2nd row
        layout.add_widget(Button(text ='Hello 2', size_hint_x = None, width = 100))
        layout.add_widget(Button(text ='World 2'))
 
        # 3rd row
        layout.add_widget(Button(text ='Hello 3', size_hint_x = None, width = 100))
        layout.add_widget(Button(text ='World 3'))
 
        # 4th row
        layout.add_widget(Button(text ='Hello 4', size_hint_x = None, width = 100))
        layout.add_widget(Button(text ='World 4'))
 
        # returning the layout
        return layout

Producción: 
 

Código n.º 3: 
Ahora, ajustemos la altura de la fila a un tamaño específico:
 

Python3

# creating the App class
class Grid_LayoutApp(App):
 
    # to build the application we have to
    # return a widget on the build() function.
    def build(self):
 
        # adding GridLayouts in App
        # Defining number of column and size of the buttons i.e height
        layout = GridLayout(cols = 2, row_force_default = True,
                            row_default_height = 30)
 
        # 1st row
        layout.add_widget(Button(text ='Hello 1', size_hint_x = None, width = 100))
        layout.add_widget(Button(text ='World 1'))
 
        # 2nd row
        layout.add_widget(Button(text ='Hello 2', size_hint_x = None, width = 100))
        layout.add_widget(Button(text ='World 2'))
 
        # 3rd row
        layout.add_widget(Button(text ='Hello 3', size_hint_x = None, width = 100))
        layout.add_widget(Button(text ='World 3'))
 
        # 4th row
        layout.add_widget(Button(text ='Hello 4', size_hint_x = None, width = 100))
        layout.add_widget(Button(text ='World 4'))
 
        # returning the layout
        return layout

Producción: 
 

  
Referencia: https://kivy.org/doc/stable/api-kivy.uix.gridlayout.html
 

Publicación traducida automáticamente

Artículo escrito por YashKhandelwal8 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *