Kivy - 过渡之间的黑屏

Question

I'm trying to copy this gif , which is done in Kivy (here's the link to the full page )

Just as I started, I noticed a black screen between transition ( link to what it looks like so you don't have to copy-paste and run)

Why does that black screen appear?

EDIT: I must work without buttons.

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen

# Create both screens. Please note the root.manager.current: this is how
# you can control the ScreenManager from kv. Each screen has by default a
# property manager that gives you the instance of the ScreenManager used.
Builder.load_string("""
    <MenuScreen>:
    canvas.before:
        Color:
            rgba: 122,255,0,2
        Rectangle:
            pos: self.pos
            size: self.size
    Label:
        text: 'hello'


<SettingsScreen>:
    canvas.before:
        Color:
            rgba: 0,255,0,2
        Rectangle:
            pos: self.pos
            size: self.size
    Label:
        text: 'hello'
""")

# Declare both screens
class MenuScreen(Screen):
    def on_touch_down(self, touch):
        sm.current = 'settings'

class SettingsScreen(Screen):
    def on_touch_down(self, touch):
        sm.current = 'menu'

# Create the screen manager
sm = ScreenManager()
sm.add_widget(MenuScreen(name='menu'))
sm.add_widget(SettingsScreen(name='settings'))

class TestApp(App):

    def build(self):
        return sm

if __name__ == '__main__':
    TestApp().run()

EDIT: I've tried this but still not working

<sm>:
    canvas:
        Color:
            rgb: (0, 255, 255)
        Rectangle:
            size: self.size
            pos: self.pos

Answer 1

You are not supposed to use the Screen subclasses directly. Instead you must add a component first (eg Button or Layout), for example use RelativeLayout :

Builder.load_string("""
<MenuScreen>:
    RelativeLayout:
        canvas.before:
            Color:
                rgba: 122,255,0,2
            Rectangle:
                pos: self.pos
                size: self.size
        Label:
            text: 'hello'


<SettingsScreen>:
    RelativeLayout:
        canvas.before:
            Color:
                rgba: 0,255,0,2
            Rectangle:
                pos: self.pos
                size: self.size
        Label:
            text: 'hello'
""")

Answer 2

That black area is a canvas of the screen manager. If you don't like it black, then you can paint it, just like you did with screens; or change transition type to NoTransition to hide it.

Also, you should consider building your screen manager inside that kv lang string.

Answer 3

Old, but in case anyone runs into this issue:

To clarify the vague responses in the comments, you need to paint your screen manager the same way you would paint a screen.

Example in kvlang:

ScreenManagement:
    canvas.before:
        Color:
            rgba: 1,1,1,1
        Rectangle:
            size: self.size
            pos: self.pos
    id: screen_manager
    transition: NoTransition()
    Screen1:
    Screen2:
    Settings_: