How to use ScrollView properly?

Question

I’m trying to use ScrollView widget to show multiple lines scroll in the screen. But the lines don’t scroll. The text that should scroll is "myList" label in the screen_second.

The idea is to click on button 1, which directs the user to the second screen, and at that moment a list will be generated that should appear in the center of the second screen.

However, the list will be too many lines and therefore must scroll on the screen.

But the list is static. It’s not rolling.

This is the kv file: myform.kv:

<ScreenManagement>:
    ScreenFirst:
    ScreenSecond:
<ScreenFirst>:
    id: screen_first
    name: 'screen_first'
    space_x: self.size[0]/14
    BoxLayout:
        orientation: "vertical"
        size_hint_y: 1
        canvas.before:
            Color:
                rgba: (0.5, 0.8, 0.4, 1.0)
            Rectangle:
                size: self.size
                pos: self.pos
        BoxLayout:
            size_hint_y: .1
            canvas.before:
                Color:
                    rgba: (0.0, 0.0, 0.0, 0.8)
                Rectangle:
                    size: self.size
                    pos: self.pos
            Label:
                text: 'Screen Number 01'
                size_hint_x: 1
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: .8
            padding: screen_first.space_x, 10
            Label:
                size_hint_y: 0.6
            Button:
                id: button1
                text: 'Go To Second Screen'
                size_hint_y: 0.1
                background_color: (0.7, 0.0, 0.2, 0.5)
                background_normal: ''
                on_release: app.root.gotoSecondScreen()
            Label:
                size_hint_y: 0.1
            Button:
                id: button2
                text: 'None'
                size_hint_y: 0.1
                background_color: (0.7, 0.0, 0.2, 0.5)
                background_normal: ''
                on_release: app.root.donothing()
            Label:
                size_hint_y: 0.1
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: .1
            canvas.before:
                Color:
                    rgba: (0.0, 0.0, 0.0, 0.8)
                Rectangle:
                    size: self.size
                    pos: self.pos
            Label:
                text: 'Footnote'
                size_hint_x: 1
<ScreenSecond>:
    id: screen_second
    name: 'screen_second'
    space_x: self.size[0]/14
    BoxLayout:
        orientation: "vertical"
        size_hint_y: 1
        canvas.before:
            Color:
                rgba: (0.5, 0.8, 0.4, 1.0)
            Rectangle:
                size: self.size
                pos: self.pos
        BoxLayout:
            size_hint_y: .1
            canvas.before:
                Color:
                    rgba: (0.0, 0.0, 0.0, 0.8)
                Rectangle:
                    size: self.size
                    pos: self.pos
            Label:
                text: 'Screen Number 02'
                size_hint_x: 1
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: .8
            padding: screen_second.space_x, 10
            BoxLayout:
                orientation: 'vertical'
                ScrollView:
                    do_scroll_y: True
                    Label:
                        id: myList
                        text: ''
                        size_hint_y: 1
                        color: (0.0, 0.0, 0.0, 0.8)
            Button:
                id: button3
                text: 'Return'
                size_hint_y: 0.1
                background_color: (0.7, 0.0, 0.2, 0.5)
                background_normal: ''
                on_release: app.root.gotoFirstScreen()
            Label:
                size_hint_y: 0.1
        BoxLayout:
            orientation: 'vertical'
            size_hint_y: .1
            canvas.before:
                Color:
                    rgba: (0.0, 0.0, 0.0, 0.8)
                Rectangle:
                    size: self.size
                    pos: self.pos
            Label:
                text: ''
                size_hint_x: 1

And this is the py file: main.py:

from kivy.app import App
from kivy.lang import Builder
from kivy.app import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.popup import Popup
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivy.properties import ObjectProperty

class ScreenFirst(Screen):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

class ScreenSecond(Screen):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

class ScreenManagement(ScreenManager):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

    def gotoFirstScreen(self):
        self.get_screen('screen_first').ids.button1.focus = True
        self.current = 'screen_first'        

    def gotoSecondScreen(self):
        mytext = ''
        for i in range(50):
            mytext = mytext + 'Line nr. ' + str(i) + 'n'
        self.get_screen('screen_second').ids.myList.text = mytext
        self.get_screen('screen_second').ids.button3.focus = True
        self.current = 'screen_second'

    def donothing(self):
        pass

class MyForm(App):
    def build(self):
        self.root = ScreenManagement()
        return self.root

if __name__=="__main__":
    pol = MyForm()
    pol.run()

What am I doing wrong?

Asked By: Eder Domingues

||

Source

Answer 1

The class that is the child of ScrollView must not have:

size_hint_y: 1

because that is setting the Label height to the same as the ScrollView, and that means there is nothing to scroll. You want the height of the Label to grow as the text requires. Try changing that Label rule in your kv to:

                Label:
                    id: myList
                    text: ''
                    size_hint_y: None
                    text_size: self.width, None
                    height: self.texture_size[1]
                    color: (0.0, 0.0, 0.0, 0.8)

Answered By: John Anderson

How to use ScrollView properly?

Question:

Answers: