Настройка вашего навигационного ящика в KIVY & KIVYMD

Kivy & Kivymd: NavigatingDrawer

Кивы является открытым исходным кодом, кроссплатформенным Python Framework для разработки приложений, которые используют инновационные пользовательские интерфейсы Multi-Touch.

Кивимд Является ли сборник дизайна материалов, совместимые виджеты для использования с Кивы Отказ

Предпосылки

Этот учебник предназначен для тех, у кого есть небольшое или хорошее знакомство с KIVY, но не знают, как двигаться вперед с реализацией своих собственных виджетов или для тех, кто не находит KIVY Визуально привлекательный Отказ

Некоторые действительно классные ресурсы для вас:

Содержание

Навигационный ящик Кивимида.
Измените навигационный ящик, заменив Название с Круговое изображение

Состав

Прежде чем начать, убедитесь, что у вас есть эта структура файлов. Загрузите файлы с здесь Отказ

- navigationdrawer
    - __init__.py  # our modified navigarion drawer.
- kivymd
    - ...
    - navigationdrawer.py
    - ...
- images # contains the image
    - me.jpg
- main.py

Прежде чем мы начнем, давайте посмотрим, как выглядит наш main.py.

NavigateApp Class.
- Объект навигатора
- Объект класса темы
Класс навигатора
- NavipateDrawericonButton

И у нас также есть:

main.py

from kivy.app import App
from kivy.lang import Builder
from kivy.properties import ObjectProperty, StringProperty
from kivymd.theming import ThemeManager
from kivymd.navigationdrawer import NavigationDrawer
# from navigationdrawer import NavigationDrawer

main_widget_kv = '''
#:import Toolbar kivymd.toolbar.Toolbar

BoxLayout:
    orientation: 'vertical'
    Toolbar:
        id: toolbar
        title: 'Welcome'
        background_color: app.theme_cls.primary_dark
        left_action_items: [['menu', lambda x: app.nav_drawer.toggle()]]
        right_action_items: [['more-vert', lambda x: app.raised_button.open(self.parent)]]
    Label:

:
    NavigationDrawerIconButton:
        icon: 'face'
        text: 'Kuldeep Singh'
    NavigationDrawerIconButton:
        icon: 'email'
        text: 'kuldeepbb.grewal@gmail.com'
        on_release: app.root.ids.scr_mngr.current = 'bottomsheet'
    NavigationDrawerIconButton:
        icon: 'phone'
        text: '+91-7727XXXXXX'
    NavigationDrawerIconButton:
        icon: 'cake'
        text: '26/11/1994'
    NavigationDrawerIconButton:
        icon: 'city-alt'
        text: 'Rohtak'
    NavigationDrawerIconButton:
        icon: 'settings'
        text: 'Settings'
    '''

class Navigator(NavigationDrawer):
    image_source = StringProperty('images/me.png')

class NavigateApp(App):
    theme_cls = ThemeManager()
    nav_drawer = ObjectProperty()

    def build(self):
        main_widget = Builder.load_string(main_widget_kv)
        self.nav_drawer = Navigator()
        return main_widget

NavigateApp().run()

Теперь, когда мы видели, как выглядит навигационный ящик, давайте посмотрим на свой исходный код.

NavipateDrawer.py от Кивимида. (Источник)

kivymd/navigationdrawer.py.

# -*- coding: utf-8 -*-
from kivy.lang import Builder
from kivymd.label import MDLabel 
from kivy.animation import Animation
from kivymd.slidingpanel import SlidingPanel
from kivymd.icon_definitions import md_icons
from kivymd.theming import ThemableBehavior
from kivymd.elevationbehavior import ElevationBehavior
from kivy.properties import StringProperty, ObjectProperty
from kivymd.list import OneLineIconListItem, ILeftBody, BaseListItem

Builder.load_string('''

    canvas:
        Color:
            rgba: root.theme_cls.divider_color
        Line:
            points: self.x, self.y, self.x+self.width,self.y


    _list: list
    elevation: 0
    canvas:
        Color:
            rgba: root.theme_cls.bg_light
        Rectangle:
            size: root.size
            pos: root.pos
    NavDrawerToolbar:
        title: root.title
        opposite_colors: False
        title_theme_color: 'Secondary'
        background_color: root.theme_cls.bg_light
        elevation: 0
    ScrollView:
        do_scroll_x: False
        MDList:
            id: ml
            id: list


    NDIconLabel:
        id: _icon
        font_style: 'Icon'
        theme_text_color: 'Secondary'
''')

class NavigationDrawer(SlidingPanel, ThemableBehavior, ElevationBehavior):
    title = StringProperty()
    _list = ObjectProperty()

    def add_widget(self, widget, index=0):
        if issubclass(widget.__class__, BaseListItem):
            self._list.add_widget(widget, index)
            widget.bind(on_release=lambda x: self.toggle())
        else:
            super(NavigationDrawer, self).add_widget(widget, index)

    def _get_main_animation(self, duration, t, x, is_closing):
        a = super(NavigationDrawer, self)._get_main_animation(duration, t, x,
                                                              is_closing)
        a &= Animation(elevation=0 if is_closing else 5, t=t, duration=duration)
        return a

class NDIconLabel(ILeftBody, MDLabel):
    pass

class NavigationDrawerIconButton(OneLineIconListItem):
    icon = StringProperty()

    def on_icon(self, instance, value):
        self.ids['_icon'].text = u"{}".format(md_icons[value])

Теперь Навигацияработник У класса есть виджет Navdrawertoolbar содержащий Название имущество. Мы хотим добавить Круговое изображение там.

Как это сделать? Изменяя Навигацияработник класс.

Измените навигационный ящик, заменяя заголовок круговым изображением

Модификация в КВ Лэнг Отказ

Оригинал:


    ...
    NavDrawerToolbar:
        title: root.title
        opposite_colors: False
        title_theme_color: 'Secondary'
        background_color: root.theme_cls.bg_light
        elevation: 0
    ...

Модифицировано:


    ...
    BoxLayout:
        size_hint: (1, .4)
        NavDrawerToolbar:
            padding: 10, 10
            canvas.after:
                Color:
                    rgba: (1, 1, 1, 1)
                RoundedRectangle:
                    size: (self.size[1]-dp(14), self.size[1]-dp(14))
                    pos: (self.pos[0]+(self.size[0]-self.size[1])/2, self.pos[1]+dp(7))
                    source: root.image_source
                    radius: [self.size[1]-(self.size[1]/2)]
    ...

Модификация на Сторона Python Отказ

Оригинал:

class NavigationDrawer(SlidingPanel, ThemableBehavior, ElevationBehavior):
    title = StringProperty()
    ...

Модифицировано:

class NavigationDrawer(SlidingPanel, ThemableBehavior, ElevationBehavior):
    image_source = StringProperty()
    ...

Модифицированный навигационный образец

NavipateDrawer/__ init__.py

# -*- coding: utf-8 -*-
from kivy.animation import Animation
from kivy.lang import Builder
from kivy.properties import StringProperty, ObjectProperty
from kivymd.elevationbehavior import ElevationBehavior
from kivymd.icon_definitions import md_icons
from kivymd.label import MDLabel
from kivymd.list import OneLineIconListItem, ILeftBody, BaseListItem
from kivymd.slidingpanel import SlidingPanel
from kivymd.theming import ThemableBehavior

Builder.load_string('''

    canvas:
        Color:
            rgba: root.parent.parent.theme_cls.divider_color
        Line:
            points: self.x, self.y, self.x+self.width,self.y


    _list: list
    elevation: 0
    canvas:
        Color:
            rgba: root.theme_cls.bg_light
        Rectangle:
            size: root.size
            pos: root.pos
    BoxLayout:
        size_hint: (1, .4)
        NavDrawerToolbar:
            padding: 10, 10
            canvas.after:
                Color:
                    rgba: (1, 1, 1, 1)
                RoundedRectangle:
                    size: (self.size[1]-dp(14), self.size[1]-dp(14))
                    pos: (self.pos[0]+(self.size[0]-self.size[1])/2, self.pos[1]+dp(7))
                    source: root.image_source
                    radius: [self.size[1]-(self.size[1]/2)]

    ScrollView:
        do_scroll_x: False
        MDList:
            id: ml
            id: list


    NDIconLabel:
        id: _icon
        font_style: 'Icon'
        theme_text_color: 'Secondary'
''')

class NavigationDrawer(SlidingPanel, ThemableBehavior, ElevationBehavior):
    image_source = StringProperty()
    _list = ObjectProperty()

    def add_widget(self, widget, index=0):
        if issubclass(widget.__class__, BaseListItem):
            self._list.add_widget(widget, index)
            widget.bind(on_release=lambda x: self.toggle())
        else:
            super(NavigationDrawer, self).add_widget(widget, index)

    def _get_main_animation(self, duration, t, x, is_closing):
        a = super(NavigationDrawer, self)._get_main_animation(duration, t, x,
                                                              is_closing)
        a &= Animation(elevation=0 if is_closing else 5, t=t, duration=duration)
        return a

class NDIconLabel(ILeftBody, MDLabel):
    pass

class NavigationDrawerIconButton(OneLineIconListItem):
    icon = StringProperty()

    def on_icon(self, instance, value):
        self.ids['_icon'].text = u"{}".format(md_icons[value])

Теперь, когда мы изменили наш навигационный ящик, давайте проверим его. Но прежде чем давайте внесем следующие изменения:

Безотлагательно Навигацияработник от Папка навигационной передачи
Ознакомьтесь с Навигацияработник от Кивимд В main.py файл.

# from kivymd.navigationdrawer import NavigationDrawer
from navigationdrawer import NavigationDrawer

И вот это. Наш навигационный ящик с круговым изображением.

Заключение

Спасибо за чтение этого поста – надеюсь, вы нашли это полезным. Вы можете найти меня на Github , LinkedIn и Кодаментар Отказ Если у вас есть какие-либо вопросы, не стесняйтесь добраться до меня! Другие сообщения:

Настройка вашего навигационного ящика в KIVY & KIVYMD
Plyer: Platform Независимый слой совместимости
Управление текстурой в Киве с использованием атласа
Учебное пособие на новичком Киве: базовый курс сбоя для приложений в Киве
Redux, Store, Действия, Редукторы и регистратор: Начните и немного дальше (1)
Redux, Reactotron, действия, редукторы и саги (2)