如何使用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 次瀏覽

開啟您的職業生涯

透過完成課程獲得認證

開始學習
廣告