首页 > 解决方案 > 如何将 Kivy ScrollView 放在屏幕上

问题描述

基维代码:

GridLayout:

    Button:

    ScrollView:

蟒蛇代码:

class SettingsScreen(Screen):
    pass

sm = ScreenManager()
sm.add_widget(MenuScreen(name='start'))
sm.add_widget(NormalScreen(name='game'))

class ChatBot(App):

    def build(self):
        return sm

ChatBot().run()

我正在尝试构建我的第一个GUI. 但问题是,我的 ScrollView 不起作用。我需要它出现在我的正常屏幕上。任何人都知道如何解决这个问题?

标签: pythonuser-interfacekivykivy-language

解决方案


该示例说明了带有标签的 Stacklayout 的滚动视图。详情请参阅示例。示例中使用了以下 Scrollview API。

滚动视图

layout.bind(minimum_height=layout.setter('height'))

bar_color
水平/垂直滚动条的颜色,RGBA 格式。
bar_color 是一个 ListProperty,默认为 [.7, .7, .7, .9]。

bar_inactive_color
水平/垂直滚动条的颜色(RGBA 格式),当没有滚动发生时。
bar_inactive_color 是一个 ListProperty,默认为 [.7, .7, .7, .2]。

bar_width
水平/垂直滚动条的宽度。宽度被解释为水平条的高度。
bar_width 是一个 NumericProperty,默认为 2。

effect_cls
为 X 和 Y 轴实例化的类效果。
effect_cls 是一个 ObjectProperty,默认为 DampedScrollEffect。

scroll_type
设置用于滚动视图内容的滚动类型。可用选项有:['content']、['bars']、['bars'、'content']。

['content'] 通过直接拖动或滑动内容来滚动内容。
['bars'] 通过拖动或滑动 scoll 条来滚动内容。
['bars', 'content'] 内容通过上述任一方法滚动。

scroll_type 是一个 OptionProperty,默认为 ['content']。

例子

主文件

from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.properties import ObjectProperty
from kivy.uix.label import Label
from kivy.clock import Clock


class MenuScreen(Screen):
    pass


class SettingsScreen(Screen):
    container = ObjectProperty(None)

    def __init__(self, **kwargs):
        super(SettingsScreen, self).__init__(**kwargs)
        Clock.schedule_once(self.setup_scrollview, 1)

    def setup_scrollview(self, dt):
        self.container.bind(minimum_height=self.container.setter('height'))
        self.add_text_inputs()

    def add_text_inputs(self):
        for x in range(30):
            self.container.add_widget(Label(text="Label {}".format(x), size_hint_y=None, height=40))

    def new_message(self):
        msg = self.display.text
        print(msg)


class ScreenManagement(ScreenManager):
    pass


class ChatBot(App):

    def build(self):
        return ScreenManagement()


ChatBot().run()

聊天机器人.kv

#:kivy 1.10.0

<But@Button>:
    font_size: 20
    font_name: "Calibri"
    color: 0, 0, 0, 1
    size_hint: .7, .1
    background_normal: ''
    background_down: 'test.png'
    background_color: .88,.88,.88, 1

<Lab@Label>:
    font_size: 27
    font_name: "Calibri"
    color: 0, 0, 0, 1

<Grid@GridLayout>:

<ScreenManagement>:
    MenuScreen:
        name: 'start'
    SettingsScreen:
        name: 'game'

<MenuScreen>:

    FloatLayout:
        canvas.before:
            BorderImage:
                border: 10, 10, 10, 10
                source: 'Blur-4K-Img08.jpeg'    # 'Blur-4K-Abstract-Wallpaper.png'
                pos: self.pos
                size: self.size

        But:
            text: "START"
            pos_hint: {"center_x": .5, "center_y": .3}
            on_press: root.manager.current = 'game'

        Lab:
            text: "Welcome to my ChatBot!"
            pos_hint: {"center_x": .5, "center_y": .8}


<SettingsScreen>:
    display: entry
    message: send
    container: container

    FloatLayout:
        canvas.before:
            BorderImage:
                border: 10, 10, 10, 10
                source: 'Blur-4K-Img08.jpeg'    # 'Blur-4K-Abstract-Wallpaper.png'
                pos: self.pos
                size: self.size

    GridLayout:
        rows: 3
        cols: 1
        spacing: 5
        padding: 5
        font_name: "Calibri"

        Button:
            text: "ChatBot"
            color: 0, 0, 0, 1
            size_hint: .7, .1
            background_normal: ''
            background_down: ''
            background_color: .88,.88,.88, 1
            font_size: 20

        ScrollView:
            size_hint: (1, .9)
            bar_width: 10
            bar_color: 1, 0, 0, 1   # red
            bar_inactive_color: 0, 0, 1, 1   # blue
            effect_cls: "ScrollEffect"
            scroll_type: ['bars']

            StackLayout:
                id: container
                size_hint_y: None

        BoxLayout:
            spacing: 5
            size_hint: .7, .1

            TextInput:
                id: entry
                multiline: False
                font_size: 25

            Button:
                id: send
                color: 0, 0, 0, 1
                background_normal: 'send.jpg'
                background_down: 'test.png'
                background_color: .88,.88,.88, 1
                size_hint: .2, 1
                on_press: root.new_message()

输出

Img01 - 滚动视图


推荐阅读