如何使用Kivymd和Python创建底部导航栏?


KivyMD是一个常用的Python库,它提供了一套符合Material Design (MD)规范的小部件。这些小部件可以与Kivy框架一起使用,Kivy框架是另一个用于创建多点触控应用程序的库。KivyMD提供的众多UI元素包括按钮、卡片、对话框、菜单等等,所有这些元素的设计都旨在提供吸引人的外观和感觉。

导航栏是一个UI元素,允许用户在应用程序的不同屏幕/部分之间“导航”。它们通常位于屏幕的顶部或底部。如果使用安卓手机,我们经常会在屏幕底部看到3个按钮。当我们使用WhatsApp或iOS上的任何功能时,我们会在底部看到诸如状态、通话、社区、聊天和设置等功能,这些功能会将我们“导航”到不同的屏幕。在KivyMD中,MDBottomNavigation小部件允许我们向其中添加MDBottomNavigationItem小部件。每个这样的项目都有一个与其关联的唯一名称和一个描述其代表的屏幕的文本标签。还可以向每个项目添加图标,以帮助用户快速理解和识别屏幕。

在本文中,我们将学习如何使用KivyMD和Python创建底部导航栏。

在继续之前,有必要安装某些库,因为它们不是标准库包的一部分。它们包括kivy和kivymd,它们的安装命令如下:

pip install kivy
pip install kivymd

现在让我们看看分步实现。

步骤1. 导入所有必要的包

Kivymd.app是KivyMD库中的一个模块,其中包含MDApp类,即KivyMD应用程序中使用的基类。它为我们提供了许多初始化应用程序和管理其生命周期的方法。kivy.uix.screenmanager用于管理Kivy应用程序中的多个屏幕,例如添加、删除和在屏幕之间切换等操作都由它处理。接下来是kivymd.uix.bottomnavigation,它包含在KivyMD应用程序中创建导航栏所需的内容。它是表示底部导航栏的主要小部件。最后,我们有kivy.lang.Builder,它是Kivy库中的一个模块,用于导入KV语言文件或使用字符串来构建相应的小部件树。

from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager
from kivymd.uix.bottomnavigation import MDBottomNavigation
from kivy.lang import Builder

步骤2. 布局设计

就像我们在网站中使用HTML和在Android中使用XML来设计布局一样,这里我们使用KV语言来设计布局。这的第一部分是MDBottomNavigation类。根据导航栏内需要多少小部件,我们将声明相同数量的子类或MDBottomNavigationItem,每个子类都有一个名称、文本和一个对应的图标,以便用户更好地理解。MDLabel用于显示指定的屏幕文本,并指定halign标签为中心,以确保文本位于屏幕中央。

KV='''<MDBottomNavigation>:
   MDBottomNavigationItem:
      name: 'screen1'
      text: 'Android'
      icon: 'android'       
      MDLabel:
         text: 'Android'
         halign: 'center'
   MDBottomNavigationItem:
      name: 'screen2'
      text: 'Apple'
      icon: 'apple'        
      MDLabel:
         text: 'Apple'
         halign: 'center'
   MDBottomNavigationItem:
      name: 'screen3'
      text: 'Linux'
      icon: 'linux'        
      MDLabel:
         text: 'Linux'
         halign: 'center'
   
   MDBottomNavigationItem:
      name: 'screen4'
      text: 'Windows'
      icon: 'microsoft-windows'        
      MDLabel:
         text: 'Windows'
         halign: 'center'
 '''

步骤3. 集成和运行代码

在此步骤中,我们声明各个屏幕类、屏幕管理器并添加小部件。为了运行编写的KV语言布局,我们使用load_string()函数并将KV字符串传递给它。或者,我们也可以使用外部KV语言文件。然后,构建器处理所有小部件并生成小部件树。调用.run()方法,这将在无需任何参数的情况下运行该类。

class Screen1(Screen):
   pass
class Screen2(Screen):
   pass
class Screen3(Screen):
    pass
class Screen4(Screen):
   pass
sm = ScreenManager()
sm.add_widget(Screen1(name='screen1'))
sm.add_widget(Screen2(name='screen2'))
sm.add_widget(Screen3(name='screen3'))
class TutorialsPointApp(MDApp):
   def build(self):
      Builder.load_string(KV)
      return MDBottomNavigation()
if __name__ == '__main__':
   TutorialsPointApp().run()

示例

from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager
from kivymd.uix.bottomnavigation import MDBottomNavigation
from kivy.lang import Builder

KV='''<MDBottomNavigation>:
   MDBottomNavigationItem:
      name: 'screen1'
      text: 'Android'
      icon: 'android'        
      MDLabel:
         text: 'Android'
         halign: 'center'             

   MDBottomNavigationItem:
      name: 'screen2'
      text: 'Apple'
      icon: 'apple'        
      MDLabel:
         text: 'Apple'
         halign: 'center'
   MDBottomNavigationItem:
      name: 'screen3'
      text: 'Linux'
      icon: 'linux'        
      MDLabel:
         text: 'Linux'
         halign: 'center'    
   MDBottomNavigationItem:
      name: 'screen4'
      text: 'Windows'
      icon: 'microsoft-windows'        
      MDLabel:
         text: 'Windows'
         halign: 'center'
 ''' 
class Screen1(Screen):
   pass
class Screen2(Screen):
   pass
class Screen3(Screen):
   pass
class Screen4(Screen):
   pass
sm = ScreenManager()
sm.add_widget(Screen1(name='screen1'))
sm.add_widget(Screen2(name='screen2'))
sm.add_widget(Screen3(name='screen3'))
class TutorialsPointApp(MDApp):
   def build(self):
      Builder.load_string(KV)
      return MDBottomNavigation()
if __name__ == '__main__':
   TutorialsPointApp().run()

输出

1. 开始/点击第一个选项(Android)

2. 点击Windows

3. 点击Apple

结论

KivyMD库对于处理符合Material Design规范的小部件来说是一个非常不错的选择。MDBottomNavigation小部件为我们在应用程序内多个屏幕之间切换提供了一个导航栏,并且可以包含一个或多个MDBottomNavigationItem小部件。要使用KivyMD,我们需要确保设计布局以字符串(此处使用)或外部文件的形式清晰地编写在KV语言中。我们实现了包含四个小部件(Android、Apple、Linux和Windows)的底部导航。当我们点击每个小部件时,屏幕会发生变化并显示相应的名称作为文本。KivyMD对于在Python中创建现代响应式用户界面非常有用,并帮助希望创建跨平台应用程序的开发者在各种设备和平台上获得一致的外观和感觉。

更新于:2023年8月18日

427 次浏览

开启您的职业生涯

通过完成课程获得认证

开始学习
广告
© . All rights reserved.