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

Question

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

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

Answer 1

这归结为cols如果屏幕较窄，则将 GridLayout 的属性设置为 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 语言会自动绑定到它，这样cols如果 Window.width 发生变化，它将被更新。这就是调整窗口大小起作用的原因。

当然，您可能还需要做更多的事情来使它完美地适合您自己的应用程序。例如，您可能希望使用映射到物理宽度并考虑到屏幕 dpi 的与比例无关的单位，而不是监视以像素为单位的宽度（请参阅kivy.metrics）。如果它使用两列/行，您可能还希望将 GridLayout 的高度设置为更大，这可以通过类似的方式实现。