vendredi 8 mai 2015

Kivy: How to avoid overlapping BoxLayout widgets

I have a Kivy app that is comprised of 3 rows. The first row is an ActionBar, the second row is a search field and button, and the last row is some text (split into two columns). My problem is that the last row of text is "overlapping" the 1st and 2nd rows. Here is a screen grab to illustrate the problem:

enter image description here

I used Paint to alter the image to depict what I'm trying to achieve:

enter image description here

I was following along to the suggestions for using nested layouts here, but I couldn't get it to work properly. Here is my main.py:

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class ShowActionBar(BoxLayout):
    pass

class ShowApp(ShowActionBar):
    pass

class MyTestApp(App):
    def build(self):
        return ShowApp()

if __name__ == "__main__":
    MyTestApp().run()

Here is my kv file:

<ShowActionBar>:
    ActionBar:
        ActionView:
            use_seperator: True
            ActionPrevious:
                title: "Magic Buffet"
                with_previous: False
            ActionOverflow:
                ActionButton:
                    text: "Settings"
            ActionButton:
                text: "Log Out"

<ShowApp>:
    orientation: "vertical"
    BoxLayout:
        orientation: "horizontal"
        height: "35dp"
        size_hint_y: None

        TextInput:
            height: 30
            width: 200
            size_hint_y: None
            size_hint_x: None            
            focus: False
            multiline: False
            hint_text: "What would you like to Eat?"

        Button:
            height: 30
            width: 100
            size_hint_y: None
            size_hint_x: None    
            text: "Search Foods"

    BoxLayout:
        orientation: "horizontal"
        MenuLeftColumn:
        MenuRightColumn:

    # Blank label to fill out the remaining bottom space
    Label:

<MenuLeftColumn@BoxLayout>:
    orientation: "vertical"

    BoxLayout:
        orientation: "horizontal"
        height: 30
        width: 400
        size_hint_y: None
        size_hint_x: None    
        Label:
            text: "Menu Item 1"
            font_size: "20dp"

    # The same "Menu Item 1" widget is repeated multiple
    # times to demonstrate a long list of widgets.
    # I've removed it for brevity

    BoxLayout:
        orientation: "horizontal"
        height: 30
        width: 400
        size_hint_y: None
        size_hint_x: None    
        Label:
            text: "Menu Item 1"
            font_size: "20dp"

<MenuRightColumn@BoxLayout>:
    orientation: "vertical"
    BoxLayout:
        orientation: "horizontal"
        height: 30
        width: 400
        size_hint_y: None
        size_hint_x: None    
        Label:
            text: "Price"
            font_size: "20dp"

What is the correct way to stack widgets (nested or otherwise) so that this overlapping behavior is avoided?

Aucun commentaire:

Enregistrer un commentaire