How do I make a FloatLayout Scrollablle using the ScrollView function in kivy-CodePudding

I am trying to figure out how i can scroll through a float layout which has widgets in various places, however when I add the floatlayout to the scrollview it doesn't scroll all the way. However, when I do this with a gridlayout, it seems to be perfectly scrollable. I would appreciate it if anybody helped me with this.

Here is my code:

KIVY

WindowManager:
    ProfileWindow:


<ProfileWindow>:
    name: 'Profile'

    canvas.before:
        Color: 
            rgba: .94,1,.9, 1
        Rectangle:
            pos: self.pos
            size: self.size

    ScrollView:
        size_hint_y: 1.4
        pos_hint: {'x':0, 'y': .01}
        do_scroll_x: False
        do_scroll_y: True

        FloatLayout:
            size_hint_y: None
            size_hint_x: None
            size: root.width, root.height        

            Button:
                size_hint_y: None
                size_hint_x: None
                height: 100
                width: 100

                text: 'test 1'

                pos_hint: {'x':0.2, 'y':0.2}
                colour: (1, 0, 0, 1)

            Button:
                size_hint_y: None
                size_hint_x: None
                height: 100
                width: 100

                text: 'test 2'

                pos_hint: {'x':0.2, 'y':-0.4}
                colour: (1, 0, 0, 1)

            Button:
                size_hint_y: None
                size_hint_x: None
                height: 100
                width: 100

                text: 'test 3'

                pos_hint: {'x':0.2, 'y':-1.0}
                colour: (1, 0, 0, 1)

            Button:
                size_hint_y: None
                size_hint_x: None
                height: 100
                width: 100

                text: 'test 4'

                pos_hint: {'x':0.2, 'y':-1.4}
                colour: (1, 0, 0, 1)```

PYTHON file

import kivy
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
import csv
from kivy.uix.scrollview import ScrollView
from kivy.uix.carousel import Carousel
from kivy.effects.kinetic import KineticEffect
from kivy.base import runTouchApp

class ProfileWindow(Screen):
    pass

class WindowManager(ScreenManager):
    pass


Build_LearnAB = Builder.load_file('sfl.kv')

class LearnScrollViewApp(App):
    def build(self):
        return Build_LearnAB

if __name__ == "__main__":
    LearnScrollViewApp().run()

CodePudding user response：

You are doing some strange things in that code. First, using size_hint values greater than 1 (as you do for your ScrollView) sets the size of the ScrollView greater than its container. That means that you will not be able to see the entire ScrollView.

Similarly, you are setting pos_hint values to numbers less than 0. That positions the Buttons outside of the FloatLayout, so they will not be visible.

I suggest eliminating the line:

size_hint_y: 1.4

from the ScrollView and just use the default value of 1.

Then, set the height of the FloatLayout to something larger then the height of the ScrollView. The ScrollView will not scroll if its child is not larger than itself. For example, set the height of the FloatLayout to twice the height of the ScrollView:

size: root.width, root.height*2

Then, use pos_hint to place the Buttons in the FloatLayout, but keep the values between 0 and less than 1, to place the Buttons within the FloatLayout.

Here is a modified version of your kv that makes these changes:

WindowManager:
    ProfileWindow:


<ProfileWindow>:
    name: 'Profile'

    canvas.before:
        Color: 
            rgba: .94,1,.9, 1
        Rectangle:
            pos: self.pos
            size: self.size

    ScrollView:
        # size_hint_y: 1.4
        pos_hint: {'x':0, 'y': .01}
        do_scroll_x: False
        do_scroll_y: True

        FloatLayout:
            size_hint_y: None
            size_hint_x: None
            size: root.width, root.height*2

            Button:
                size_hint_y: None
                size_hint_x: None
                height: 100
                width: 100

                text: 'test 1'

                pos_hint: {'x':0.2, 'y':0.75}
                colour: (1, 0, 0, 1)

            Button:
                size_hint_y: None
                size_hint_x: None
                height: 100
                width: 100

                text: 'test 2'

                pos_hint: {'x':0.2, 'y':0.5}
                colour: (1, 0, 0, 1)

            Button:
                size_hint_y: None
                size_hint_x: None
                height: 100
                width: 100

                text: 'test 3'

                pos_hint: {'x':0.2, 'y':0.25}
                colour: (1, 0, 0, 1)

            Button:
                size_hint_y: None
                size_hint_x: None
                height: 100
                width: 100

                text: 'test 4'

                pos_hint: {'x':0.2, 'y':0}
                colour: (1, 0, 0, 1)