Search code examples
kivykivy-languagekivymd

Understanding KivyMD Screen Layouts


I want to understand how to layout a KivyMD screen using a GridLayout with ScrollView, and with a BottomNavigation. My code doesn't work because the GridLayout displays over the BottonNavigation which then can't be seen. What is the correct way to setup this layout? And, generally are there rule-of-thumbs for KivyMD screen layouts? Thanks

<MyScreen>:
name: 'myscreen'

ScrollView:
    orientation:'vertical'

    MDGridLayout:
        cols: 3
        adaptive_height: True
        padding: dp(4), dp(4)
        spacing: dp(4)

        etc.

BoxLayout:
    orientation:'vertical'

    MDBottomNavigation:
        panel_color: .2, .2, .2, 1

        MDBottomNavigationItem:
            name: 'left'
            text: 'Left'
            icon: 'chevron-left'

            MDLabel:
                text: 'Left'
                halign: 'center'
                font_style: 'Icon'

        MDBottomNavigationItem:
            name: 'right'
            text: 'Right'
            icon: 'chevron-right'

            MDLabel:
                text: 'Right'
                halign: 'center'
                font_style: 'Icon'
        etc.

Solution

  • The Layout classes monitor the sizes of their children, and recalculates the layout and redraws if that size changes. So, I believe that if your Image size does not change, then only that Image will be updated.

    The kivy Builder maintains a set of rules based on the kv files loaded, so whether those rules come from separate files doesn't really matter. I would recommend structuring your kv file(s) based on things like maintainability, readability, and logical partitioning