android - 将 GridLayout 元素移动到新行以适应 Kivy 中较小的屏幕

Question

假设我有一个 GridLayout，一行有四个按钮，在平板电脑上看起来不错。如何设置我的 .kv 文件，以便在较小的屏幕(如手机)上，单行中的四个按钮变成两行中的两个按钮。因此适合屏幕而不会使按钮太小而看不见。

我对 Kivy 还是很陌生，但我确信一定有办法做到这一点。我只是还没有弄明白。我一直在研究 GridLayout 的 API，并尝试了一些其他方法，但无济于事。

Answer 1

这归结为设置 GridLayout 的 cols如果屏幕窄则属性为 2，如果屏幕较宽则属性为 4。这是一个简短的应用程序，正是这样做的:

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.lang import Builder

Builder.load_string('''
#:import Window kivy.core.window.Window
<ResponsiveGridLayout>:
    cols: 2 if Window.width < 400 else 4
    Button:
        text: 'button 1'
    Button:
        text: 'button 2'
    Button:
        text: 'button 3'
    Button:
        text: 'button 4'
''')



class ResponsiveGridLayout(GridLayout):
    pass

class GridApp(App):
    def build(self):
        return ResponsiveGridLayout()

if __name__ == "__main__":
    GridApp().run()

您应该能够在桌面上运行它，并在您调整窗口大小时看到列数动态变化。截止值为 400 像素。

重要的一点是 cols: 2 if Window.width < 400 else 4 行.由于冒号右侧的所有内容都是纯 python，因此根据 Window(在顶部导入)的宽度返回 2 或 4。自 cols是一个 kivy 属性，GridLayout 可以并且确实会监视它以在其值发生变化时自动重做布局。

编辑:需要说明的是，Window.width 也是一个 kivy 属性，因此 kv 语言会自动绑定(bind)到它，这样 cols如果 Window.width 更改，将更新。这就是调整窗口大小的原因。

当然，您可能还需要做更多的工作才能使它完美适合您自己的应用。例如，与其以像素为单位监视宽度，不如使用映射到物理宽度的与比例无关的单位，同时考虑屏幕 dpi(请参阅 kivy.metrics)。如果它使用两列/两行，您可能还想将 GridLayout 的高度设置得更大，这可以通过类似的方式实现。