时间戳

首页 > 解决方案 > 使用 Kivy 应用程序进行费用跟踪...无法对齐网格布局

python - 使用 Kivy 应用程序进行费用跟踪...无法对齐网格布局

问题描述

我正在为自己开发一个费用应用程序。在第二个屏幕中，我想将“一月”和“年初至今”标签移到靠近“可用余额”的位置，然后移到上面的部分下方。我花了几天时间，但无法找到解决方案。我想知道你是否有人可以帮助我。

from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.scrollview import ScrollView
from kivymd.uix.label import MDLabel
from kivy.uix.gridlayout import GridLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.widget import Widget

screen_helper = """

<GoButton>:
    Button:
        font_size: 12
        text: "Search"
        background_color: app.theme_cls.primary_color
        size_hint: 0.1, 0.05
        pos_hint: {'x': 0.2, 'y':0.7}
        #on_release: app.run_test()

<MonthYear@MDTextField>:
    font_size: 20
    hint_text: "Enter Month/Year"
    helper_text: "MM/YYYY"
    helper_text_mode: 'on_focus'
    size_hint: None, None
    width:120

ScreenManager:
    MainPage:
    IndividualExpense:
    UploadScreen:
<MainPage>:
    name: 'main'
    BoxLayout:
        orientation: 'vertical'
        spacing: '8dp'
        

        MDToolbar:
            title: 'Home'

        MDLabel:
            text: "  Expenses" 
            font_style: 'Subtitle1'
            size_hint_y: None
            height: self.texture_size[1]   
            
        ScrollView:
            MDList:
                OneLineListItem:
                    text: 'Cell phone'
                OneLineListItem:
                    text: 'Grocery'
                
                 
        MDToolbar:
                
            left_action_items: [["home", lambda x: app.mainPageScreen()],   ["file-table-outline", lambda x: app.IndivdualExpenseScreen()], ["view-compact", lambda x: app.listOfStocksScreen()],]
       
    
    
<IndividualExpense>:
    name: 'indExp'
    BoxLayout:
        orientation: 'vertical'
        spacing: '8dp'
        MDToolbar:
            title: 'Cell Phone'
        
        
        GridLayout:
            cols: 3
            FloatLayout:
                MonthYear
                    pos_hint: {'x':0.025, 'y': .7}
            FloatLayout:

                Button:
                    font_size: 14
                    size_hint: 0.4,0.15
                    text: "Submit"
                    background_color: app.theme_cls.primary_color
                    pos_hint: {"x":0.01, "top":0.93}

        GridLayout:
            cols: 1
            size: root.width-300, root.height-300

            FloatLayout:

                MDLabel:
                    text: '  Available Balance'
                    pos_hint: {'x': 0.0, 'y':1}
        GridLayout:
            cols: 2
            size: root.width-300, root.height-300
            FloatLayout:

                MDLabel:
                    text: ' January'
                    pos_hint: {'x': 0.0, 'y':1}
            FloatLayout:

                MDLabel:
                    text: 'Year-to-Date'
                    pos_hint: {'x': 0.0, 'y':1}
            GridLayout:
                cols: 1
                MDLabel:
                    text: '  Monthly Budget: '
                MDLabel:
                    text: '  MTD Expense: '
                MDLabel:
                    text: '  YTD Budget: '
                MDLabel:
                    text: '  YTD Expense: '
                
        
        
            
                
        
        
        MDToolbar:
                
            left_action_items: [["home", lambda x: app.mainPageScreen()],   ["file-table-outline", lambda x: app.IndivdualExpenseScreen()], ["view-compact", lambda x: app.listOfStocksScreen()],]
       
        
<UploadScreen>:
    name: 'upload'
    MDLabel:
        text: 'Upload'
        halign: 'center'
    MDRectangleFlatButton:
        text: 'Back'
        pos_hint: {'center_x':0.5,'center_y':0.1}
        on_press: root.manager.current = 'main'
        
"""



class MainPage(Screen):
    pass


class IndividualExpense(Screen):
    pass


class UploadScreen(Screen):
    pass

class GoButton(FloatLayout):
    pass
# Create the screen manager
sm = ScreenManager()
sm.add_widget(MainPage(name='main'))
sm.add_widget(IndividualExpense(name='indExp'))
sm.add_widget(UploadScreen(name='upload'))


class DemoApp(MDApp):
    def mainPageScreen(self):
        self.root.current = 'main'
        self.root.transition.direction = 'left'
    
    def IndivdualExpenseScreen(self):
        self.root.current = 'indExp'
        self.root.transition.direction = 'right'

    def build(self):
        screen = Builder.load_string(screen_helper)
        return screen


DemoApp().run()

查看第二个屏幕

标签： pythonweb-applicationskivy

解决方案

<IndividualExpense>:这是您的规则的修改版本kv：

<IndividualExpense>:
    name: 'indExp'
    BoxLayout:
        orientation: 'vertical'
        spacing: '8dp'
        
        MDToolbar:
            title: 'Cell Phone'
        
        GridLayout:
            cols: 4
            size_hint_y: 0.15
            MonthYear:
                
            Widget:
                size_hint_x: 0.3

            Button:
                font_size: 14
                size_hint: 0.3,0.15
                text: "Submit"
                background_color: app.theme_cls.primary_color
                
            Widget:
                size_hint_x: 0.1

        GridLayout:
            cols: 1
            size_hint_y: 0.1
            MDLabel:
                text: '  Available Balance'
                pos_hint: {'x': 0.0, 'y':1}
                
        GridLayout:
            cols: 2
            size_hint_y: 0.8

            MDLabel:
                text: ' January'
                pos_hint: {'x': 0.0, 'top':1}
                size_hint_y: 0.2

            MDLabel:
                text: 'Year-to-Date'
                pos_hint: {'x': 0.0, 'top':1}
                size_hint_y: 0.2
                
            GridLayout:
                size_hint_y: 0.8
                cols: 1
                MDLabel:
                    text: '  Monthly Budget: '
                MDLabel:
                    text: '  MTD Expense: '
                MDLabel:
                    text: '  YTD Budget: '
                MDLabel:
                    text: '  YTD Expense: '

        MDToolbar:
            left_action_items: [["home", lambda x: app.mainPageScreen()],   ["file-table-outline", lambda x: app.IndivdualExpenseScreen()], ["view-compact", lambda x: app.listOfStocksScreen()],]

我删除了几个FloatLayouts似乎没有用的东西。我还删除了一些属性（除非are size，否则它们无效）。由于您在此规则中的基本布局是 a ，因此每个子级都将根据其值获得垂直空间的份额。类似的方法。size_hintsNoneBoxLayoutBoxLayoutsize_hint_yGridLayouts

推荐阅读