Python | FloatLayout en Kivy usando el archivo .kv

Kivy es una herramienta GUI independiente de la plataforma en Python. Como se puede ejecutar en Android, IOS, Linux y Windows, etc. Básicamente se usa para desarrollar la aplicación de Android, pero eso no significa que no se pueda usar en aplicaciones de escritorio.

👉🏽 Tutorial de Kivy: aprenda Kivy con ejemplos .

Diseño flotante:

Floatlayout nos proporciona la flexibilidad para organizar los elementos como un botón relativamente, es decir, nos permite colocar los elementos usando algo llamado posición relativa. Esto significa que en lugar de definir la posición específica o las coordenadas, colocaremos todo utilizando el porcentaje respecto al tamaño de la ventana, es decir, podemos organizar dinámicamente la posición de los elementos.

Lo primero que debemos hacer import FloatLayout –

from kivy.uix.floatlayout import FloatLayout

Tenemos 2 propiedades para crear la ubicación dinámica:

1) pos_hint: proporciona una pista de posición
. Podemos definir hasta 6 claves, es decir, toma argumentos en forma de diccionario.
pos_hint = {“x”:1, “y”:1, “izquierda”:1, “derecha”:1, “arriba”:1, “abajo”:1}

2) size_hint: proporciona una pista de tamaño
Contiene dos argumentos, es decir, ancho y alto

Nota:

  • Solo puede usar valores entre 0 y 1 para size_hint y pos_hint. Donde 0 = 0% y 1 = 100%.
  • ¡El sistema de coordenadas en kivy funciona desde la parte inferior izquierda! Esto será importante a la hora de colocar nuestros objetos. (es decir, (0, 0) es la parte inferior izquierda).
Basic Approach:

1) import kivy
2) import kivyApp
3) import Floatlayout
4) Set minimum version(optional)
5) create Layout class
6) create App class
7) Set up .kv file
8) return Layout/widget/Class(according to requirement)
9) Run an instance of the class

 
Implementación del enfoque –

archivo principal.py

## Sample Python application demonstrating the
## working of FloatLayout in Kivy using .kv file
  
###################################################
# import modules
  
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
  
# module consist the floatlayout
# to work with FloatLayout first
# you have to import it
from kivy.uix.floatlayout import FloatLayout
  
# To change the kivy default settings 
# we use this module config 
from kivy.config import Config 
     
# 0 being off 1 being on as in true / false 
# you can use 0 or 1 && True or False 
Config.set('graphics', 'resizable', True)
  
  
# creating the root widget used in .kv file 
class FloatLayout(FloatLayout):
    pass
  
# creating the App class in which name
#.kv file is to be named Float_Layout.kv
class Float_LayoutApp(App):
    # defining build()
    def build(self):
        # returning the instance of root class
        return FloatLayout()
  
# run the app
if __name__ == "__main__":
    Float_LayoutApp().run()

Este archivo incluye las ubicaciones dinámicas del botón, es decir, a medida que cambia el tamaño de la pantalla, el botón se ajusta relativamente, este es el beneficio de FloatLayout.

Archivo .kv implementación del enfoque

#.kv file implementation of FloatLayout
  
# creating button feature
<Button>:
    font_size: 40
      
    # creating button
    # a button 30 % of the width and 50 %
    # of the height of the layout 
    size_hint: 0.3, 0.3
  
<FloatLayout>:
      
    Button:
        text: "Helooo !!!!! "
        background_color: 0.1, 0.5, 0.6, 1
  
        # positioned at 0 % right and 100 % up / top
        # from bottom left, i.e x, top = 0, 100 from bottom left:
        pos_hint: {"x":0, "top":1}
  
    Button:
        text:"Rajnish:)"
        background_color: 1, 0, 0, 1
        pos_hint: {"x":0.35, "y":0.3}
  
          
    Button:
        text:"Ravi:)"
        background_color: 0.4, 0.5, 0.6, 1
        pos_hint: {"x":.7, "bottom":0}
  
    Button:
        text:"Sanjeev:)"
        background_color: 0, 0, 1, 1
        pos_hint: {"x":.7, "top":1}
  
    Button:
        text:"Suraj:)"
        background_color: 0.8, 0.9, 0.2, 1
        pos_hint: {"x":0, "bottom":1}

Producción:

Salida de vídeo:

 
Referencia:
https://kivy.org/doc/stable/api-kivy.uix.floatlayout.html
https://techwithtim.net/tutorials/kivy-tutorial/floatlayout/

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 *