¿Cómo crear un banner en kivymd-Python?

En este artículo veremos cómo agregar el banner a nuestra aplicación usando KivyMD en Python.

Un banner es un elemento desplegable cuando se activa un botón o una acción. Los banners se utilizan ampliamente para ventanas emergentes y advertencias en aplicaciones móviles. Es posible que necesite una comprensión básica de kv lang para comenzar.

Instalación:

Para instalar los módulos, escriba el siguiente comando en la terminal.

pip instalar kivy

pip instalar kivymd

Pancarta sencilla:

Paso 1. Importe los paquetes necesarios.

Para esto, necesitaremos Builder, Factory de kivy y MDApp del paquete kivymd.

Nota: No importaremos widgets kivy/clases kivy porque estamos diseñando nuestro diseño utilizando el lenguaje kv. 

# importing packages
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp

Paso 2. Disposición del diseño.

Estaremos diseñando nuestro diseño usando lenguaje kv.

• Primero, declararemos la clase de widget de pantalla llamada Screen y luego la clase de widget secundaria. Aquí MDBanner, MDToolbar y MDBoxLayout son una clase secundaria, y OneLineListItem y el widget son clases secundarias de MDBoxLayout.
• Pasaremos los parámetros id, text, over_widget y vertical_pad a MDBanner. El parámetro id es completamente opcional aquí, pero lo usamos para darle una identidad única. over_widget y vertical_pad se utilizan para la alineación en pantalla, over_widget establece el Banner en la pantalla y vertical_pad establece el relleno verticalmente en la pantalla. El parámetro de texto es la salida de texto en MDBanner.
• Pasaremos los parámetros de título, id, elevación y pos_hint en MDToolbar. Cuando el título funciona como texto, la elevación se usa para alinear MDToolbar en la parte superior de la pantalla y pos_hint se usa para especificar su ubicación en la pantalla.
• En MDBoxLayout usaremos id, orientación, size_hint_y, height. Donde mantendremos nuestra orientación vertical, size_hint_y se usa para especificar la altura de acuerdo con el eje y, y usaremos el parámetro de altura para obtener un BoxLayout adecuado cuando se suelta MDBanner (de manera simple, necesitamos cambiar la altura de BoxLayout cuando MDBanner está caído).
• También usaremos el widget y OneLineListItem donde el widget estará vacío y pasaremos text y on_release. On_release es un evento aquí, por lo que cuando se active el evento, mostrará el banner.

# importing packages
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp
 
# it will load the kv
# Note: we need not to import MDBanner
# or anything if working with kv
Builder.load_string('''
<Banner@Screen>
    # this will create a banner
    MDBanner:
        id: banner
        text: ["GEEKS FOR GEEKS."]
         
        # defining size to banner
        over_widget: screen
        vertical_pad: toolbar.height
     
    # this will create a toolbar
    MDToolbar:
        id: toolbar
        title: "Example Banners"
        elevation: 10
        pos_hint: {'top': 1}
 
    # this will create a vertical box layout
    MDBoxLayout:
        id: screen
        orientation: "vertical"
        size_hint_y: None
        height: Window.height - toolbar.height
         
        # it will trigger banner to show
        OneLineListItem:
            text: "CLICK HERE"
            on_release: banner.show()
             
        # we will keep widget because we want to align OneLineListItem at the top
        # or it will float at the bottom by default
        Widget: 
''')
 
 
# App class
class Test(MDApp):
    def build(self):
 
        # Factory.banner is our kv lang we wrote
        # which was loader by builder.load_string()
        # and stored in Factory
        return Factory.Banner()
 
 
# running app
Test().run()

Implementación de código:

# importing packages
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp
 
# it will load the kv
# Note: we need not to import MDBanner
# or anything if working with kv
Builder.load_string('''
<Banner@Screen>
    # this will create a banner
    MDBanner:
        id: banner
        text: ["GEEKS FOR GEEKS."]
         
        # defining size to banner
        over_widget: screen
        vertical_pad: toolbar.height
     
    # this will create a toolbar
    MDToolbar:
        id: toolbar
        title: "Example Banners"
        elevation: 10
        pos_hint: {'top': 1}
 
    # this will create a vertical box layout
    MDBoxLayout:
        id: screen
        orientation: "vertical"
        size_hint_y: None
        height: Window.height - toolbar.height
         
        # it will trigger banner to show
        OneLineListItem:
            text: "CLICK HERE"
            on_release: banner.show()
             
        #we don't need widgets so we will leave widget empty
        #or you can simply remove it
        Widget: 
''')
 
# App class
class Test(MDApp):
    def build(self):
 
        # Factory.banner is our kv lang we wrote
        # which was loader by builder.load_string()
        # and stored in Factory
        return Factory.Banner()
 
# running app
Test().run()

Producción:

Pancarta con botones:

En esto, agregaremos botones al banner. Para este ejemplo, el enfoque será el mismo que el ejemplo anterior, pero necesitamos agregar algunos parámetros en MDBanner para poder agregar botones.

Sintaxis:

MDBanner:

left_action : [“texto”, función]

right_action : [“texto”, función]

En este ejemplo, left_action define el botón izquierdo y right_action para el botón derecho. Donde texto será el texto para el botón y el segundo parámetro será nuestra función. Para este ejemplo, pasaremos la función lambda y pasaremos None.

Implementación:

# importing packages
from kivy.lang import Builder
from kivy.factory import Factory
from kivymd.app import MDApp
 
# it will load the kv
# Note: we need not to import MDBanner
# or anything if working with kv
Builder.load_string('''
<Banner@Screen>
    # this will create a banner
    MDBanner:
        id: banner
        text: ["GEEKS FOR GEEKS."]
         
        # defining button in banner
        left_action: ["LEARN MORE", lambda x: None]
        right_action: ["CLOSE", lambda x: None]
         
        # defining size to banner
        over_widget: screen
        vertical_pad: toolbar.height
     
    # this will create a toolbar
    MDToolbar:
        id: toolbar
        title: "Example Banners"
        elevation: 10
        pos_hint: {'top': 1}
 
    # this will create a vertical box layout
    MDBoxLayout:
        id: screen
        orientation: "vertical"
        size_hint_y: None
        height: Window.height - toolbar.height
         
        # it will trigger banner to show
        OneLineListItem:
            text: "CLICK HERE"
            on_release: banner.show()
             
        #we don't need widgets so we will leave widget empty
        #or you can simply remove it
        Widget: 
''')
 
# App class
class Test(MDApp):
    def build(self):
 
        # Factory.banner is our kv lang we wrote
        # which was loader by builder.load_string()
        # and stored in Factory
        return Factory.Banner()
 
# running app
Test().run()

Producción: