CODEWITHSUNDEEP
pythonpython-3.xkivy
illright
illright

Reputation: 4043

Dealing with ScrollViews in Kivy

I want to draw a border around a ScrollView in my Kivy app. The problem is that the content of the ScrollView overlap that border since I'm drawing it inside the widget.
So I'm wondering if one of those is a possible solution:

Here is some test code to demonstrate the issue. It's a slightly modified official example. The buttons overlap the green border when scrolling, which is what I don't want:

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.button import Button
from kivy.uix.scrollview import ScrollView
from kivy.uix.gridlayout import GridLayout

Builder.load_string('''
<ScrollView>:
    canvas:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size
        Color:
            rgba: 0, 1, 0, 1
        Line:
            points: self.x, self.y + self.height,\
            self.x + self.width, self.y + self.height,\
            self.x + self.width, self.y, self.x, self.y,\
            self.x, self.y + self.height
            width: 1.2
''')

class TestApp(App):                
    def build(self):
        layout = GridLayout(cols=1, padding=10, spacing=10,
                            size_hint=(None, None), width=500)
        layout.bind(minimum_height=layout.setter('height'))
        for i in range(30):
            btn = Button(text=str(i), size=(480, 40),
                         size_hint=(None, None))
            layout.add_widget(btn)

        root = ScrollView(size_hint=(None, None), size=(500, 320),
                          pos_hint={'center_x': .5, 'center_y': .5}, do_scroll_x=False)
        root.add_widget(layout)
        return root

TestApp().run()

Upvotes: 0

Views: 1176

Answers (1)

Peter Badida
Peter Badida

Reputation: 12159

How can I draw outside the widget's boundaries? When I tried to move a part of a canvas element outside the widget, it simply cut off that part, which is no surprise. Perhaps I could make another widget outside this one and draw on it?

Don't really have a clue what you mean by it. canvas has no boundaries, except if you use Stencil. When you try to draw outside of ScrollView, content out of the widget's space will be hidden, because originally it uses Stencil so that the unnecessary content is hidden and you could scroll through it as you can see here.

Now about that overlaping. canvas.after before the second Color makes it draw after the widgets are drawn. Similar to canvas.before, which is used for backgrounds.

canvas:
    Color:
        rgba: 1, 1, 1, 1
    Rectangle:
        pos: self.pos
        size: self.size
canvas.after:
    ...

Basic canvas is drawn in the "same" time as the widgets are, therefore the item that is drawn later will be on the top no matter what you do. after will draw after all is drawn again with that order and before does the same thing before the widgets are even drawn at all.

How can I limit the content of the ScrollView? So, can I change the scroll boundaries? What I mean is that I don't want the children to go beyond a certain point in the widget to make them not touch the border

Use layout with fixed size that handles it's children's pos e.g. FloatLayout with pos_hint or BoxLayout depends on your need, therefore it will push the widgets inside to imaginary rectangle, which is basically [0, 0] to [width, height] i.e. size of your layout(if you use it right).

Upvotes: 1

Related Questions