带有屏幕管理器和网格布局的 Kivy 滚动视图

Question

Like many other questions, im having issues with scrollview. I'm trying to have a bunch of different buttons, that goes to different screens, but the buttons sit on top of each other, are stuck in the corner or only one button is appearing and the screen is cut in half.

I've tried having the screenmanager outside the TabbedPanelItem, giving every widget a size and no size_hint_y but to no avail? is it not possible to have the screenmanager inside the tabbedpanel or is it bad practice

Python file.

from kivy.app import App
from kivy.core.window import Window
from kivy.uix.screenmanager import ScreenManager, Screen 
from kivy.config import Config
from kivy.lang import Builder
Config.set('graphics', 'resizeable', 0)
Window.size = (375,700)

class MainScreen(Screen):
    pass
class FirstScreen(Screen):
    pass

class SecondScreen(Screen):
    pass
root = Builder.load_file("main.kv")
class myapp(App):
    def build(self):
        return root

if __name__ == '__main__':
    myapp().run()

main.kv

TabbedPanel:
    do_default_tab: False

    TabbedPanelItem:
        text:"1"
        ScrollView:
            size: self.size
            FloatLayout: #gridlayout? #boxlayout?
                size_hint_y: None
                ScreenManager:
                    id: manager  

                    MainScreen:
                        name: 'main'

                        GridLayout:
                            spacing: 10
                            padding: 10
                            cols:1
                            row_default_height: 100
                            row_force_default: True
                            Button:
                                text: 'first'
                                on_press: manager.current = 'first'  
                                size_hint: 1, None
                                height: 100
                            Button:
                                text: 'Second'
                                on_press: manager.current = 'second'  
                                
                    FirstScreen:
                        name: 'first'
                    SecondScreen:
                        name: "second"
    TabbedPanelItem:
        text:"2"

    TabbedPanelItem:
        text:"3"
<FirstScreen>:
    BoxLayout:
        Label:
            text:"first"
        Button:
            text: 'Back to main'
            on_press: root.manager.current = 'main'

<SecondScreen>
    BoxLayout:
        Label:
            text:"second"
        Button:
            text: 'Back to main'
            on_press: root.manager.current = 'main'

Answer 1

You can do what you want, but it seems a bit complicated. Here is a kv that I think will do it:

TabbedPanel:
    do_default_tab: False

    TabbedPanelItem:
        text:"1"
        ScrollView:
            ScreenManager:
                id: manager  
                size_hint_y: None
                height: self.current_screen.height  # only seems to work for first Screen
                on_current_screen: self.height = self.current_screen.height  # required because above line failure

                MainScreen:
                    name: 'main'
                    size_hint_y: None
                    height: grid.height  # set this Screen height to the height of the GridLayout

                    GridLayout:
                        id: grid
                        size_hint_y: None
                        height: self.minimum_height  # set this height to the minimum required
                        spacing: 10
                        padding: 10
                        cols:1
                        row_default_height: 100
                        row_force_default: True
                        Button:
                            text: 'first'
                            on_press: manager.current = 'first'  
                            size_hint: 1, None
                            height: 100
                        Button:
                            text: 'Second'
                            on_press: manager.current = 'second'  
                            
                FirstScreen:
                    name: 'first'
                SecondScreen:
                    name: "second"
    TabbedPanelItem:
        text:"2"

    TabbedPanelItem:
        text:"3"
<FirstScreen>:
    size_hint_y: None
    height: 100   # must set its height
    BoxLayout:
        Label:
            text:"first"
        Button:
            text: 'Back to main'
            on_press: root.manager.current = 'main'

<SecondScreen>
    size_hint_y: None
    height: 100   # must set its height
    BoxLayout:
        Label:
            text:"second"
        Button:
            text: 'Back to main'
            on_press: root.manager.current = 'main'

A few things to note:

• You don't need a Layout to contain the ScreenManager .
• You need to set the height of the ScreenManager based on the height of its current Screen .
• The line height: self.current_screen.height should adjust the height of the ScreenManager every time the current Screen changes, but it doesn't. So I added on_current_screen: self.height = self.current_screen.height to adjust the size when the current Screen changes.
• Since the ScreenManager height depends on the Screen height, every Screen must have a well defined height.
• The MainScreen height is determined by the GridLayout height, and the GridLayout height is calculated using self.minimum_height .