[Python][Kivy] 内容被隐藏在可滚动区域

Question

我已经把内容放进去

AnchorLayout():
    ScrollView():
       GridLayout():

在这种树形中。

运行时显示如下：

ps。请原谅我的擦除。其个人资料

但是当用鼠标右键垂直向上拖动鼠标并按住时， 只有当我按住鼠标指针时，才会显示隐藏的内容。图片如下所示：

当我在拖动鼠标光标后没有按住鼠标光标时，现在会显示左侧和顶部的内容。

我应该怎么做才能让这一切变得像样？

当我为应用程序构建这些小部件时，如果这些小部件不适合移动设备，我有点担心。

能否请您指导我如何设置 loc 以及随窗口大小变化而扩展或缩小的小部件的大小。

我的代码在这里找到： https://gist.github.com/georgekym/b6cc93a7b8224246bc937afd7e2f0ead

# -*- coding:utf-8 -*-
from kivy.app import App
from kivy.core.window import Window
from kivy.properties import ObjectProperty
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.button import Button

from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label

from kivy.uix.screenmanager import Screen, ScreenManager
from kivy.uix.scrollview import ScrollView


class OrdersPage(Screen):
    sm = ObjectProperty()

    def __init__(self, sm, name, **kwargs):
        super(OrdersPage, self).__init__(**kwargs)
        self.sm = sm
        self.name = name
        self.set_order_products()

    def set_order_products(self):
        prod_layout = GridLayout(cols=2,
                                 row_force_default=True,
                                 row_default_height=40,
                                 size_hint=(None, None),
                                 spacing=(10, 10))
        prod_layout.bind(minimum_height=prod_layout.setter('height'))

        product_table_header = {'Qty': 50, 'Product': 300}
        product_width_list = [50, 300]
        for column in product_table_header.keys():
            prod_layout.add_widget(Product(bold=True,
                                           text=column,
                                           width=product_table_header[column],
                                           size_hint=(None, None),
                                           color=(0.53, 0.808, 0.92, 1),
                                           valign='middle',
                                           halign='left'
                                           ))

        prod = [['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash']]

        for one in prod:
            for index in range(len(one)):
                prod_layout.add_widget(Button(text=str(one[index]), width=product_width_list[index]))

        self.v_scroller = ScrollView(size_hint=(1, 1))
        self.v_scroller.add_widget(prod_layout)
        self.prod_grand_layout = AnchorLayout(anchor_x='center',
                                              anchor_y='bottom',
                                              padding=(10, 10),
                                              size_hint=(1, 1),
                                              pos=(0, -200)
                                              # size=(380, 500)
                                              )

        self.prod_grand_layout.add_widget(self.v_scroller)

        self.add_widget(self.prod_grand_layout)


class Product(Label):
    def __init__(self, **kwargs):
        super(Product, self).__init__(**kwargs)
        self.size_hint = (None, None)
        self.color = (0.53, 0.808, 0.92, 1)
        self.valign = 'middle'
        self.halign = 'left'
        self.font_size = 13


class MainController(ScreenManager):
    def __init__(self, **kwargs):
        super(MainController, self).__init__(**kwargs)


class TestApp(App):
    sm = ObjectProperty()

    def build(self):
        Window.clearcolor = (1, 1, 1, 1)
        Window.size = (400, 600)
        self.sm = MainController()
        self.sm.add_widget(OrdersPage(self.sm, name='tester'))
        return self.sm


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

非常感谢您的指导。

Answer 1

我认为最大的问题是您的AnchorLayout 是用以下方式创建的：

pos=(0, -200)

这意味着AnchorLayout 的底部 200 像素低于 OrdersPage 的底部。

为了在窗口改变大小时调整大小，请使用size_hint 而不是实际大小。她是您发布的代码的修改版本，其中包含我提到的更改。

# -*- coding:utf-8 -*-
from kivy.app import App
from kivy.core.window import Window
from kivy.lang import Builder
from kivy.properties import ObjectProperty
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.screenmanager import Screen, ScreenManager


class OrdersPage(Screen):

    def set_order_products(self):
        prod_layout = self.ids.prod_layout

        # use size_hints for width instead of actual width values
        product_table_header = {'Qty': 0.15, 'Product': 0.85}
        product_width_list = [0.15, 0.85]
        for column in product_table_header.keys():
            prod_layout.add_widget(Product(bold=True,
                                           text=column,
                                           size_hint_x=product_table_header[column]
                                           ))

        prod = [['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash'],
                ['1', 'BodyWash']]

        for one in prod:
            for index in range(len(one)):
                prod_layout.add_widget(Button(text=str(one[index]), size_hint_x=product_width_list[index]))


class Product(Label):
    pass


class MainController(ScreenManager):
    pass


kv = '''
<Product>:
    size_hint_y: None
    height: self.texture_size[1]
    color: (0.53, 0.808, 0.92, 1)
    valign: 'middle'
    halign: 'left'
    font_size: 13
    
<OrdersPage>:
    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'bottom'
        padding: (10, 10)
        ScrollView:
            GridLayout:
                id: prod_layout
                cols: 2
                row_force_default: True
                row_default_height: 40
                size_hint_y: None
                spacing: (10, 10)
                height: self.minimum_height
<MainController>:
    OrdersPage:
        name: 'tester'
'''


class TestApp(App):
    sm = ObjectProperty()

    def build(self):
        # load the kv rules
        Builder.load_string(kv)
        
        Window.clearcolor = (1, 1, 1, 1)
        Window.size = (400, 600)
        self.sm = MainController()

        # fill the OrdersPage
        self.sm.get_screen('tester').set_order_products()

        return self.sm


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

我使用kv 语言来设置GUI。这简化了代码并为您设置了绑定，否则您必须自己编写代码。