Crear barra de herramientas en KivyMD

En este artículo, veremos cómo agregar la barra de herramientas en aplicaciones móviles usando KivyMD en Python. KivyMD proporciona dos tipos de barra de herramientas:

• Barra de herramientas superior
• Barra de herramientas inferior

Veamos cómo crear cada tipo de barra de herramientas y cómo agregar ciertos atributos como título, menú de la izquierda, menú de la derecha, etc. Algunos atributos de uso común son:

Agregar título:

Para agregar un título a la barra de herramientas, use el atributo de título .

Sintaxis: title: ‘El título que queremos mostrar en la barra de herramientas’

Se representa de la siguiente manera-

MDToolbar:
    title:'Demo'     

Agregar menú izquierdo y derecho:

Es el menú izquierdo y derecho que debes haber visto en ciertas aplicaciones. Para crear esto se utilizan los siguientes atributos.

Sintaxis: 

Left_action_items: necesitamos especificar un ícono y una función asociada con él que se mostrará en el lado izquierdo del título.

right_action_items: similar a left_action_items pero en el lado derecho
 

Se representa de la siguiente manera:

MDBarra de herramientas:

título: ‘Demostración’

left_action_items:[[‘menú’,lambda x: app.navigation_draw()]]

right_action_items:[[‘cerrar sesión’,lambda x: app.navigation_draw()]]

Elevación:

 Se utiliza para mostrar el efecto de sombra debajo de una barra de herramientas.

Sintaxis: elevación: para mostrar un efecto de sombra debajo de la barra de herramientas

Se representa de la siguiente manera

MDBarra de herramientas:

título: ‘Demostración’

    left_action_items:[[‘menú’,lambda x: app.navigation_draw()]]

    right_action_items:[[‘cerrar sesión’,lambda x: app.navigation_draw()]]

    elevación: 10

Color de fondo:

Para cambiar el color de la barra de herramientas se utiliza md_bg_color.

Sintaxis: md_bg_color: Su representación debe ser un valor RGB

Se representa de la siguiente manera:

MDBarra de herramientas:

título: ‘Demostración’

left_action_items:[[‘menú’,lambda x: app.navigation_draw()]]

right_action_items:[[‘cerrar sesión’,lambda x: app.navigation_draw()]]

    elevación: 10

    md_bg_color: 0,0,100/255,1

Barra inferior:

Además de la barra de herramientas superior, también podemos agregar una barra de herramientas inferior. MDBottomAppBar se utiliza para mostrar la barra de herramientas en la parte inferior.

Se representa de la siguiente manera:

MDBottomAppBar:

MDBarra de herramientas:

título: ‘Abajo’

  left_action_items:[[‘menú’,lambda x: app.navigation_draw()]]

    elevación: 10

    md_bg_color: 0,0,100/255,1

Veamos un ejemplo en el que crearemos la barra de herramientas superior e inferior.

Nota: Los widgets en la pantalla se ajustarán solos según el tamaño de la ventana porque los widgets usan sugerencias (ajustes) de tamaño de manera predeterminada.

from kivymd.app import MDApp
from kivymd.uix.label import MDLabel
from kivymd.uix.screen import Screen
from kivy.lang import Builder
  
# builder method
helper="""
Screen:
    name:'About us'
    BoxLayout:
        orientation:'vertical'
        MDToolbar:
            title:'Demo'
            left_action_items:[['menu',lambda x: app.navigation_draw()]]
            right_action_items:[['logout',lambda x: app.navigation_draw()]]
            elevation:10
            md_bg_color: 0,0,100/255,1
              
        MDLabel:
            text:"hi"
            halign:'center'
        MDBottomAppBar:
            MDToolbar:
                title:'Bottom'
                left_action_items:[['menu',lambda x: app.navigation_draw()]]
                elevation:10
                md_bg_color: 0,0,100/255,1
"""
class Demo(MDApp):
  
    def build(self):
  
        screen=Builder.load_string(helper)
        return screen
      
    # lambda Function
    def navigation_draw(self):
        print("NavBar")
  
if __name__ == "__main__":
    Demo().run()

Producción: