python-3.xkivykivy-languagepage-layout

Page layout - resetting the page in Kivy / Python


I'm just getting started with Kivy programming for Python. I'm having trouble in using the PageLayout. This is my Python Code so far (Python 3.6.2):

import kivy

from kivy.app import App
from kivy.uix.pagelayout import PageLayout


class PageApp(App):

    def build(self):
        return PageLayout()

paApp = PageApp()
paApp.run()

The Kivy-file (PageApp.kv) has the following content:

<PageLayout>:
    canvas:
        Color:
            rgb: 0, .5, .95
        Rectangle:
            pos: self.pos
            size: self.size

    BoxLayout:
        orientation: "vertical"
        Button:
            text: "This is a test button"
            size_hint_y: .4
        Label:
            markup: True
            text: "This is a [b]looooong[/b] text... "*100
            color: 0, 0, 0, 1
            outline_color: 0, 0.5, 0.5, 1
            font_size: 30

    BoxLayout:
        orientation: "vertical"
        Label:
            markup: True
            text: "This is an even [b]looooonger[/b] text... "*100
            color: 0, 0, 0, 1
            outline_color: 0, 0.5, 0.5, 1
            font_size: 30
        Button:
            text: "This is a second test button"
            size_hint_y: .2

    Button:
        text: "Page 3"

    Button:
        text: "Page 4"

The result looks like this: Page 1, Page 2 (after swiping)

As is visible from the screenshots, the following problems appear:

  1. The Labels don't show.
  2. The background is only partially in the color that I specified in the canvas-settings.
  3. Most importantly: the page doesn't seem to reset after swiping, leading to the problem that elements from the first page remain on the page when swiping to page 2. Page 3 and 4 seem to work fine, because the buttons take the whole space...

Does anyone know how to fix these issues?


Solution

  • Please refer to the example below for details.

    Question The Labels don't show.
    Answer The two Labels did show up but as black labels because you have exceeded the text size. In page 1, I have changed the multiplication value from 100 to 49. Anything 50 and above, you will see a black label.
    In page 2, I have removed 100. Anything between 2 and 36, the text overflowed into page 1. Anything 37 and above, you will see a black label.

    Question The background is only partially in the color that I specified in the canvas-settings. Answer The color of the canvas was not set for page 2. Therefore, it is using the color from page 1.

    Question Most importantly: the page doesn't seem to reset after swiping, leading to the problem that elements from the first page remain on the page when swiping to page 2. Page 3 and 4 seem to work fine, because the buttons take the whole space...
    Answer You will see border areas on the right or left hand side which is use for swiping from one page to the next.

    Example

    main.py

    from kivy.app import App
    from kivy.uix.pagelayout import PageLayout
    
    
    class PageLayoutDemo(PageLayout):
        pass
    
    
    class TestApp(App):
        title = "Kivy PageLayout Demo"
    
        def build(self):
            return PageLayoutDemo()
    
    
    if __name__ == "__main__":
        TestApp().run()
    

    test.kv

    #:kivy 1.10.0
    
    <PageLayoutDemo>:
        BoxLayout:
            canvas:
                Color:
                    rgb: 0, .5, .95, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
    
            orientation: "vertical"
            Button:
                text: "This is a test button"
                size_hint_y: .4
            Label:
                markup: True
                text: "This is a [b]looooong[/b] text... " * 49
                color: 0, 0, 0, 1
                outline_color: 0, 0.5, 0.5, 1
                font_size: 30
    
        BoxLayout:
            orientation: "vertical"
            canvas:
                Color:
                    rgba: 109/255., 8/255., 57/255., 1
                Rectangle:
                    pos: self.pos
                    size: self.size
            Label:
                markup: True
                text: "This is an even [b]looooonger[/b] text... "
                color: 0, 0, 0, 1
                outline_color: 0, 0.5, 0.5, 1
                font_size: 30
            Button:
                text: "This is a second test button"
                size_hint_y: .2
    
        Button:
            text: "Page 3"
    
        Button:
            text: "Page 4"
    

    Output

    enter image description here enter image description here