Kivy支出追踪应用开发GridLayout布局对齐问题求助

解决方案 #

你布局出现大面积空白的核心原因是每个独立GridLayout都设置了size: root.width-300, root.height-300，每个GridLayout都占用了接近窗口高度的空间，才导致各个模块分散。直接替换你kv代码里的<IndividualExpense>部分即可实现需求：

<IndividualExpense>:
    name: 'indExp'
    BoxLayout:
        orientation: 'vertical'
        spacing: '8dp'
        MDToolbar:
            title: 'Cell Phone'
        
        # 顶部输入和提交按钮区域
        GridLayout:
            cols: 3
            size_hint_y: None
            height: self.minimum_height
            padding: 10, 10
            FloatLayout:
                size_hint_y: None
                height: 60
                MonthYear
                    pos_hint: {'x':0.025, 'center_y':0.5}
            FloatLayout:
                size_hint_y: None
                height: 60
                Button:
                    font_size: 14
                    size_hint: 0.4,0.15
                    text: "Submit"
                    background_color: app.theme_cls.primary_color
                    pos_hint: {"x":0.01, "center_y":0.5}

        # 统计内容区域，全部放到同一个GridLayout避免大间距
        GridLayout:
            cols: 1
            size_hint_y: None
            height: self.minimum_height
            padding: 20, 10
            spacing: 15
            
            MDLabel:
                text: '  Available Balance'
                size_hint_y: None
                height: self.texture_size[1]
                font_style: 'Subtitle1'
            
            # January和Year-to-Date标签行
            GridLayout:
                cols: 2
                size_hint_y: None
                height: self.minimum_height
                spacing: 20
                
                MDLabel:
                    text: ' January'
                    size_hint_y: None
                    height: self.texture_size[1]
                MDLabel:
                    text: 'Year-to-Date'
                    size_hint_y: None
                    height: self.texture_size[1]
            
            # 下方统计数据模块
            GridLayout:
                cols: 1
                size_hint_y: None
                height: self.minimum_height
                spacing: 8
                MDLabel:
                    text: '  Monthly Budget: '
                    size_hint_y: None
                    height: self.texture_size[1]
                MDLabel:
                    text: '  MTD Expense: '
                    size_hint_y: None
                    height: self.texture_size[1]
                MDLabel:
                    text: '  YTD Budget: '
                    size_hint_y: None
                    height: self.texture_size[1]
                MDLabel:
                    text: '  YTD Expense: '
                    size_hint_y: None
                    height: self.texture_size[1]
        
        # 底部工具栏
        MDToolbar:
            left_action_items: [["home", lambda x: app.mainPageScreen()],   ["file-table-outline", lambda x: app.IndivdualExpenseScreen()], ["view-compact", lambda x: app.listOfStocksScreen()],]

调整说明 #

• 删掉了所有GridLayout硬编码的等高设置，改用自适应内容高度的配置，避免多余空白
• 把余额、月份标签、统计数据放到同一个内容区域GridLayout里，可通过调整spacing参数自定义模块间距
• 去掉了不必要的FloatLayout嵌套，降低布局控制复杂度

内容的提问来源于stack exchange，提问作者Ed George