CODEWITHSUNDEEP
pythonscrollkivy
JULIUS
JULIUS

Reputation: 121

Kivy Scroll View does not scroll

I use kivys scroll view widget for the first time and I am not sure how I get this to run. I want to scroll up and done trough the different labels.

How can I achieve this ?

Which attributes are needed for the scroll view widget ? Can I use any layout for it ?

Thanks

This Code that does not work at the moment:

<YearLabel@ButtonBehavior+Label>:
<YearScreen>:
    canvas.before:
        Color:
            rgba: 1,1,1,0.25
        Rectangle:
            pos: self.pos
            size: self.size


    canvas.after:
        Color:
            rgba : 0,0,0,1
        Rectangle:
            pos: 160,1560
            size: 419,60


    ScrollView:
        scroll_timeout: 250
        scroll_distance: 20
        do_scroll_y: True
        do_scroll_x: False
        height: 100
        GridLayout:
            cols : 1
            spacing: 10
            padding: 10
            height: 50
            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2020"
                color: 0,0,0,1
                pos : 0,1200
                font_size: "120sp"

            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2021"
                color: 0,0,0,1
                pos: 0,900
                font_size: "120sp"
            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2022"
                color: 0,0,0,1
                pos: 0,600
                font_size: "120sp"

            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2023"
                color: 0,0,0,1
                pos: 0,300
                font_size: "120sp"

            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2024"
                color: 0,0,0,1
                pos: 0,0
                font_size: "120sp"

            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2025"
                color: 0,0,0,1
                pos: 0,-300
                font_size: "120sp"

            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2026"
                color: 0,0,0,1
                pos: 0,-600
                font_size: "120sp"

            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2027"
                color: 0,0,0,1
                pos: 0,-900
                font_size: "120sp"

            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2028"
                color: 0,0,0,1
                pos: 0,-1200
                font_size: "120sp"

            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2029"
                color: 0,0,0,1
                pos: 0,-1500
                font_size: "120sp"


            YearLabel:
                id: year_label
                font_name: "Fonts/sans-serif.ttf"
                text : "2030"
                color: 0,0,0,1
                pos: 0,-1800
                font_size: "120sp"

Upvotes: 0

Views: 107

Answers (1)

John Anderson
John Anderson

Reputation: 39107

The ScrollView will not work if its child (the GridLayout) is smaller than the ScrollView. Typically, the GridLayout would be large enough to hold all its children (the YearLabels). Conveniently, the GridLayout can calculate that size. Here is a modified version of your kv that uses it:

ScrollView:
    scroll_timeout: 250
    scroll_distance: 20
    do_scroll_y: True
    do_scroll_x: False
    GridLayout:
        cols : 1
        spacing: 10
        padding: 10
        size_hint_y: None  # required since we are setting height
        height: self.minimum_height  # let GridLayout calculate height

Also, I removed the height: 100 from the ScrollView, since it had no effect.

In order for the GridLayout to calculate minimum_height, all its children must have well defined heights. So, I added to your YearLabel rule:

<YearLabel@ButtonBehavior+Label>:
    size_hint: 1, None
    height: dp(100)

Upvotes: 1

Related Questions