kivymd / KivyMD

KivyMD is a collection of Material Design compliant widgets for use with Kivy, a framework for cross-platform, touch-enabled graphical applications. https://youtube.com/c/KivyMD https://twitter.com/KivyMD https://habr.com/ru/users/kivymd https://stackoverflow.com/tags/kivymd
https://kivymd.readthedocs.io
MIT License
2.26k stars 674 forks source link

MDNavigationDrawer Not able to center the text in the navigation Drawer #1749

Closed siluswayn closed 2 weeks ago

siluswayn commented 2 weeks ago

Description of the Bug

image number 1 :

I cant get the text to center in the navigation drawer even after using (code included)

halign: "center" halign: "left"

text field is under MDNavigationItemLabel

image number 2 : If i put the text name and icon in the BaseMDNavigationItem it reproduces the name twice

image number 3

the text filed under BaseMDNavigationItem and not under MDNavigationItemLabel

Code and Logs

from kivy.lang import Builder
from kivy.properties import StringProperty

from kivymd.app import MDApp
from kivymd.uix.navigationbar import MDNavigationBar, MDNavigationItem,MDNavigationItemLabel
from kivymd.uix.screen import MDScreen

class BaseMDNavigationItem(MDNavigationItem):
    icon = StringProperty()
    text = StringProperty()

class BaseScreen(MDScreen):
    ...
KV = '''
<BaseMDNavigationItem>

    MDNavigationItemIcon:
        icon: root.icon

    MDNavigationItemLabel:
        text: root.text

<BaseScreen>

MDFloatLayout:
    orientation: "vertical"
    md_bg_color: self.theme_cls.backgroundColor

    MDScreenManager:
        id: screen_manager

        BaseScreen:
            name: "Gate"

    MDNavigationBar:
        on_switch_tabs: app.on_switch_tabs(*args)
        theme_bg_color: "Custom"
        md_bg_color: "black"

        BaseMDNavigationItem
            #text: "Gate"
           # icon: "gate"
            active: True
            indicator_color:"black"
            #indicator_transition:"in"

            MDNavigationItemIcon
                icon: "gate"
                theme_icon_color:"Custom"
                icon_color_normal:(6,6,1,1)
                icon_color_active:"gold"

            MDNavigationItemLabel
                text: "Gate"
                theme_text_color: "Custom"
                text_color_active: "gold"
                text_color_normal:"white"
                font_style: "Title"
                role: "small"
                halign: "center"

        BaseMDNavigationItem           
            indicator_color:"black"

            MDNavigationItemLabel
                text: "Alarm"
                theme_text_color: "Custom"
                text_color_active: "gold"
                text_color_normal:"white"
                halign: "auto"

            MDNavigationItemIcon
                icon: "alarm-light-outline"
                theme_icon_color:"Custom"
                icon_color_normal:(6,6,6)
                icon_color_active:"gold"

'''

class Gate(MDApp):
    def on_switch_tabs(
        self,
        bar: MDNavigationBar,
        item: MDNavigationItem,
        item_icon: str,
        item_text: str,
    ):
        self.root.ids.screen_manager.current = item_text

    def build(self):
        return Builder.load_string(KV)

Gate().run()

Screenshots

Screenshot_2024-11-09_14-20-15 number 1

Screenshot_2024-11-09_14-24-09 number 2

Screenshot_2024-11-09_14-25-42 number 3

Versions

chillibasket commented 2 weeks ago

The problem is you have defined the "MDNavigationItemLabel" and "MDNavigationItemIcon" widgets twice, once within the definition of the "BaseMDNavigationItem" at the top, then again when you are adding items to the "MDNavigationBar". Of course this is going to lead to duplicate and inconsistent results. Try removing one of these duplicates:

KV = '''
<BaseMDNavigationItem>
    indicator_color:"black"

    MDNavigationItemIcon:
        icon: root.icon
        theme_icon_color:"Custom"
        icon_color_normal:(6,6,6)
        icon_color_active:"gold"

    MDNavigationItemLabel:
        text: root.text
        theme_text_color: "Custom"
        text_color_active: "gold"
        text_color_normal:"white"

<BaseScreen>

MDFloatLayout:
    orientation: "vertical"
    md_bg_color: self.theme_cls.backgroundColor

    MDScreenManager:
        id: screen_manager

        BaseScreen:
            name: "Gate"

    MDNavigationBar:
        on_switch_tabs: app.on_switch_tabs(*args)
        theme_bg_color: "Custom"
        md_bg_color: "black"

        BaseMDNavigationItem
            text: "Gate"
            icon: "gate"

        BaseMDNavigationItem           
            text: "Alarm"
            icon: "alarm-light-outline"
'''
siluswayn commented 2 weeks ago

Thanks