如何在 kivymd 中制作网格布局？

Posted 2023-04-14

【中文标题】如何在 kivymd 中制作网格布局？

【英文标题】：How to make gridlayout in kivymd?

【发布时间】：2021-01-01 03:42:12

【问题描述】：

我正在尝试在 kivymd 中进行网格布局。 GridLayout 创建但宽度未填满屏幕。如何在kivymd中扩展列的宽度以适应屏幕？

我使用了来自 kivymd 文档的示例，并使用它创建了一个网格布局。

app.py

from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager
from kivy.lang import Builder
from main_screen_str import helper_string
from kivy.core.window import Window

Window.size = (300, 500)


class MainScreen(Screen):
    pass


class MainApp(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.sm = ScreenManager()
        self.sm.add_widget(MainScreen(name="main_screen"))

        self.main_str = Builder.load_string(helper_string)

    def build(self):
        screen = Screen()
        screen.add_widget(self.main_str)
        return screen


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

这是构建器字符串。网格布局已创建，但宽度不适合屏幕。 如何扩展网格布局中单个列的宽度？

构建字符串

helper_string = """
ScreenManager:
    MainScreen:

<MainScreen>:
    name: 'main_screen'
        
    MDGridLayout:
        cols: 3
        
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
            
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
            
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color
            
        MDIconButton:
            icon: "android"
            theme_text_color: "Custom"
            text_color: app.theme_cls.primary_color 
"""

【参考方案1】：

根据MDIconBuuton Documentation：

默认情况下，MDIconButton 按钮的大小为 (dp(48), dp (48))

GridLayout 将使用这些大小值来调整列的大小。您可以通过调整MDIconButtons 的大小来调整列大小。所以，如果你只是添加：

size_hint_x: 0.33

对于每个MDIconButton，每列将是MainScreen 宽度的三分之一。