在同一屏幕上显示水平和垂直滚动视图

时间:2020-05-02 12:06:00

标签: python kivy kivy-language

我正在尝试创建一个屏幕,该屏幕在页面顶部具有水平的滚动视图,占据约25%的垂直空间,而垂直的滚动视图则占据其余空间(然后可以滚动在屏幕下方)。

我已经设法创建了水平滚动视图,但是无法使垂直滚动视图在同一屏幕上工作。

py文件:

import kivy
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.lang import Builder
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.image import Image
from

Window.clearcolor = (1,1,1,1)

class Window(Screen):
    pass

class MyApp(App):
    theme_cls = ThemeManager()


    def build(self):
        kv = Builder.load_file("kivy.kv")
        self.sm = WindowManager()

        screens = [Window(name="window")]
        for screen in screens:
            self.sm.add_widget(screen)

        self.sm.current = "window"
        return self.sm


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

kv文件:

<Window>:
    name: "window"

    NavigationLayout:
        id: nav_layout
        MyNavDrawer:


        BoxLayout:
            orientation: "vertical"

            MDToolbar:
                pos_hint: {'top': 1}
                md_bg_color: 1, 1, 1, 1

            ScrollView: #horizontal scrollview - works fine
                size_hint_y: 0.5
                GridLayout:
                    rows: 1
                    id: scroll_horizontal
                    size_hint_x: None
                    col_default_width: root.width*0.2
                    width: self.minimum_width*1.3
                    spacing: 20

           ScrollView: #vertical scrollview, not working
                size_hint_y: 0.85
                do_scroll_x: False
                GridLayout:
                    id: scroll_vertical
                    cols: 1
                    size_hint_y: None
                    spacing: 40
                    height: self.minimum_height
                    canvas:
                        Color:
                            rgba: (1, 1, 1, 1)
                        Rectangle:
                            size: self.size
                            pos: self.pos
                    BoxLayout:
                        cols: 2
                        spacing: 10
                        Button:
                            size_hint_y: 0.5
                            text: "Btn1"
                        Button:
                            size_hint_y: 0.5
                            text: "Btn2"
                    BoxLayout:
                        cols: 2
                        spacing: 10
                        Button:
                            size_hint_y: 0.5
                            text: "Btn1"
                        Button:
                            size_hint_y: 0.5
                            text: "Btn2"
                    BoxLayout:
                        cols: 2
                        spacing: 10
                        Button:
                            size_hint_y: 0.5
                            text: "Btn1"
                        Button:
                            size_hint_y: 0.5
                            text: "Btn2"

我希望它们彼此独立,因此您既可以在顶部滚动视图上水平滚动,也可以通过垂直滚动视图上的框布局上的按钮进行垂直滚动

1 个答案:

答案 0 :(得分:0)

花了一些时间才能使您的MCVE正常工作,但这是kv的一部分,我进行了修改,使两个ScrollViews可以双向滚动:

        ScrollView: #horizontal
            size_hint_y: 0.25
            do_scroll_y: False
            GridLayout:
                rows: 1
                id: scroll_horizontal
                size_hint: None, 1
                col_default_width: root.width*0.2
                width: self.minimum_width*1.3
                spacing: 20
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_x: None
                    width: self.minimum_width
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn1"
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn2"
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_x: None
                    width: self.minimum_width
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn1"
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn2"
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_x: None
                    width: self.minimum_width
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn1"
                    Button:
                        size_hint: None, 1
                        width: 500
                        text: "Btn2"


        ScrollView:   # vertical
            size_hint_y: 0.75
            do_scroll_x: False
            GridLayout:
                id: scroll_vertical
                cols: 1
                size_hint: 1.0, None
                spacing: 40

                # must set height
                height: self.minimum_height
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_y: None
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn1"
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn2"
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_y: None
                    height: self.minimum_height
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn1"
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn2"
                BoxLayout:
                    cols: 2
                    spacing: 10
                    size_hint_y: None
                    height: self.minimum_height
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn1"
                    Button:
                        size_hint: 0.5, None
                        height: 100
                        text: "Btn2"