如何为Kivy应用的多Screen默认添加垂直滚动功能

要实现所有Screen默认支持内容过长时上下滚动，最简洁的方式是创建一个带ScrollView的基类Screen，让所有业务Screen继承这个基类，避免重复编写滚动逻辑。

步骤1：修改Python代码，创建滚动基类 #

在Python文件中添加一个ScrollableScreen类，作为所有业务Screen的父类：

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.floatlayout import FloatLayout
from kivy.properties import ColorProperty, NumericProperty, ListProperty, ObjectProperty
from kivy.animation import Animation
from kivy.uix.textinput import TextInput
from kivy.metrics import dp

class KivyApp(App):
    pass

# 新增滚动基类Screen
class ScrollableScreen(Screen):
    content_box = ObjectProperty(None)

# 所有业务Screen改为继承ScrollableScreen
class OpenScreen(ScrollableScreen):
    pass

class LoginWindow(ScrollableScreen):
    pass

class RegisterWindow(ScrollableScreen):
    def seller_true(self, instance, value):
        if value == True:
           pass 
        else:
            pass

class MainWindow(ScrollableScreen):
    def move_to_trade_area(self):
        print("Moved")

class TradeWindow(ScrollableScreen):
    pass

# 其余CustomTextInput、WindowManager代码保持不变

步骤2：修改KV文件，配置基类模板 #

在KV文件中定义ScrollableScreen的默认结构，内置ScrollView和内容容器：

WindowManager:
    OpenScreen:
    RegisterWindow:
    LoginWindow:
    MainWindow:
    TradeWindow:

# 滚动基类的KV模板
<ScrollableScreen>:
    content_box: content_box
    ScrollView:
        size: root.size
        pos: root.pos
        do_scroll_x: False  # 禁用水平滚动，只保留垂直滚动
        BoxLayout:
            id: content_box
            orientation: 'vertical'
            size_hint_y: None  # 让高度由内容决定
            height: self.minimum_height  # 自动适配内容高度
            padding: 0
            spacing: 0

# 修改OpenScreen布局，将内容放入content_box
<OpenScreen>:
    name: 'open'
    canvas.before:
        Color:
            rgba: (240/255, 240/255, 240/255, 1)
        Rectangle:
            pos: self.pos
            size: self.size
    content_box:
        BoxLayout:
            padding: '10dp'
            spacing: '10dp'
            orientation: 'vertical'
            Label:
                text: 'Schoolsale'
                color: 'black'
            RoundedButton:
                text: 'Login'
                on_press: app.root.current = 'login'
            RoundedButton:
                text: 'Register'
                on_press: app.root.current = 'register'

# 修改LoginWindow布局，将内容放入content_box
<LoginWindow>:
    name: 'login'
    canvas.before:
        Color:
            rgba: (240/255, 240/255, 240/255, 1)
        Rectangle:
            pos: self.pos
            size: self.size
    content_box:
        GridLayout:
            cols: 1
            size_hint_y: None
            height: self.minimum_height
            GridLayout:
                cols: 1
                padding: 15, 15
                spacing: 20, 20
                Label:
                    text: "User Login"
                    color: 'black'
                    font_size: "20sp"
                CustomTextInput:
                    id: username
                    hint_text: "Username"
                CustomTextInput:
                    id: password
                    password: True
                    hint_text: "Password"
                RelativeLayout:
                    RoundedButton:
                        text: "Login"
                        size_hint: 0.3, 0.5
                        pos_hint: {'center_x' : 0.5, 'center_y' : 0.6}
                Label:
                    id: login_wrong
                    text: ""
            GridLayout:
                cols: 2
                size_hint: 0.2, 0.2
                padding: 10, 10
                spacing: 10, 0
                Button:
                    text: "Forgot Password"
                    background_color: 1, 1, 1, 0
                    opacity: 1 if self.state == 'normal' else 0.5
                    color: 240/255, 70/255, 60/255, 1
                Button:
                    background_color: 1, 1, 1, 0
                    opacity: 1 if self.state == 'normal' else 0.5
                    color: 240/255, 70/255, 60/255, 1
                    text: "Go to the Sign Up page"
                    on_press: app.root.current = 'register'
                    on_press: root.manager.transition.direction = 'right'

# 其余RegisterWindow、MainWindow、TradeWindow同理，将原有布局内容放入content_box下
# RoundedButton、CustomTextInput的KV定义保持不变

关键说明 #

• ScrollableScreen中的content_box是一个ObjectProperty，用于让子Screen将内容挂载到ScrollView的容器中。
• ScrollView设置do_scroll_x: False可以避免不必要的水平滚动，专注垂直方向。
• 所有放入content_box的子布局，需要设置size_hint_y: None和height: self.minimum_height，这样布局高度会根据内容自动计算，当高度超过Screen可视区域时，自动触发滚动。

内容的提问来源于stack exchange，提问作者Rithvik Muthuvelu