如何在屏幕上放置Kivy ScrollView

Question

Kivy Code:

GridLayout:

    Button:

    ScrollView:

Python Code:

class SettingsScreen(Screen):
    pass

sm = ScreenManager()
sm.add_widget(MenuScreen(name='start'))
sm.add_widget(NormalScreen(name='game'))

class ChatBot(App):

    def build(self):
        return sm

ChatBot().run()

I am trying to build my first GUI . But the problem is, that my ScrollView is not working. I need it to be on my normal Screen. Anyone knowing how to fix this problem?

Answer 1

The example illustrates a Scrollview of Stacklayout with Labels. Please refer to the example for details. The following Scrollview APIs were used in the example.

ScrollView

layout.bind(minimum_height=layout.setter('height'))

bar_color
Color of horizontal / vertical scroll bar, in RGBA format.
bar_color is a ListProperty and defaults to [.7, .7, .7, .9].

bar_inactive_color
Color of horizontal / vertical scroll bar (in RGBA format), when no scroll is happening.
bar_inactive_color is a ListProperty and defaults to [.7, .7, .7, .2].

bar_width
Width of the horizontal / vertical scroll bar. The width is interpreted as a height for the horizontal bar.
bar_width is a NumericProperty and defaults to 2.

effect_cls
Class effect to instantiate for X and Y axis.
effect_cls is an ObjectProperty and defaults to DampedScrollEffect.

scroll_type
Sets the type of scrolling to use for the content of the scrollview. Available options are: ['content'], ['bars'], ['bars', 'content'].

['content'] Content is scrolled by dragging or swiping the content directly.
['bars'] Content is scrolled by dragging or swiping the scoll bars.
['bars', 'content'] Content is scrolled by either of the above methods.

scroll_type is an OptionProperty and defaults to ['content'].

Example

main.py

from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.properties import ObjectProperty
from kivy.uix.label import Label
from kivy.clock import Clock


class MenuScreen(Screen):
    pass


class SettingsScreen(Screen):
    container = ObjectProperty(None)

    def __init__(self, **kwargs):
        super(SettingsScreen, self).__init__(**kwargs)
        Clock.schedule_once(self.setup_scrollview, 1)

    def setup_scrollview(self, dt):
        self.container.bind(minimum_height=self.container.setter('height'))
        self.add_text_inputs()

    def add_text_inputs(self):
        for x in range(30):
            self.container.add_widget(Label(text="Label {}".format(x), size_hint_y=None, height=40))

    def new_message(self):
        msg = self.display.text
        print(msg)


class ScreenManagement(ScreenManager):
    pass


class ChatBot(App):

    def build(self):
        return ScreenManagement()


ChatBot().run()

chatbot.kv

#:kivy 1.10.0

<But@Button>:
    font_size: 20
    font_name: "Calibri"
    color: 0, 0, 0, 1
    size_hint: .7, .1
    background_normal: ''
    background_down: 'test.png'
    background_color: .88,.88,.88, 1

<Lab@Label>:
    font_size: 27
    font_name: "Calibri"
    color: 0, 0, 0, 1

<Grid@GridLayout>:

<ScreenManagement>:
    MenuScreen:
        name: 'start'
    SettingsScreen:
        name: 'game'

<MenuScreen>:

    FloatLayout:
        canvas.before:
            BorderImage:
                border: 10, 10, 10, 10
                source: 'Blur-4K-Img08.jpeg'    # 'Blur-4K-Abstract-Wallpaper.png'
                pos: self.pos
                size: self.size

        But:
            text: "START"
            pos_hint: {"center_x": .5, "center_y": .3}
            on_press: root.manager.current = 'game'

        Lab:
            text: "Welcome to my ChatBot!"
            pos_hint: {"center_x": .5, "center_y": .8}


<SettingsScreen>:
    display: entry
    message: send
    container: container

    FloatLayout:
        canvas.before:
            BorderImage:
                border: 10, 10, 10, 10
                source: 'Blur-4K-Img08.jpeg'    # 'Blur-4K-Abstract-Wallpaper.png'
                pos: self.pos
                size: self.size

    GridLayout:
        rows: 3
        cols: 1
        spacing: 5
        padding: 5
        font_name: "Calibri"

        Button:
            text: "ChatBot"
            color: 0, 0, 0, 1
            size_hint: .7, .1
            background_normal: ''
            background_down: ''
            background_color: .88,.88,.88, 1
            font_size: 20

        ScrollView:
            size_hint: (1, .9)
            bar_width: 10
            bar_color: 1, 0, 0, 1   # red
            bar_inactive_color: 0, 0, 1, 1   # blue
            effect_cls: "ScrollEffect"
            scroll_type: ['bars']

            StackLayout:
                id: container
                size_hint_y: None

        BoxLayout:
            spacing: 5
            size_hint: .7, .1

            TextInput:
                id: entry
                multiline: False
                font_size: 25

            Button:
                id: send
                color: 0, 0, 0, 1
                background_normal: 'send.jpg'
                background_down: 'test.png'
                background_color: .88,.88,.88, 1
                size_hint: .2, 1
                on_press: root.new_message()

Output