Kivy：MDIconButton 不在 Gridlayout 中居中，并且带有按钮行为的 MDLabel 无法移动

Question

我是 Kivy 的新手，我想为我的应用制作一个登录屏幕。我有两个问题。首先，在我的 Gridlayout 中，我有 3 个 MDIconbuttons，无论我尝试什么，它们似乎都无法居中。其次，我想要带有文本“忘记密码/用户名？”的 MDLabel。更接近我上面的 MDTextFieldRound，但添加负填充会移动文本，但不会移动按钮行为。

main.py

import kivy 
from kivy.uix.widget import Widget
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.behaviors.button import ButtonBehavior
from kivymd.app import MDApp
from kivymd.theming import ThemeManager

class SignInScreen(Screen):
    pass

class ButtonGrid(ButtonBehavior, BoxLayout):
    pass

class AttendanceApp(MDApp):
    def build(self):
        self.theme_cls.primary_palette = "LightBlue"
        self.theme_cls.accent_palette = "Red"
        return SignInScreen()
    def change_theme(self, primary_palette, accent_palette):
        pass
        #theme_cls = ThemeManager()
    def signin_pressed(self, instance):
        pass

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

出勤率.kv

# Filename: Attendance.kv

#:import utils kivy.utils

#screens

<SignInScreen>
    #change_theme: app.change_theme("Bright Blue", "Red")
    BoxLayout:
        orientation: "vertical"
        pos_hint: {"center_x": .5, "center_y": .75}
        size_hint: .8, 1
        spacing: dp(25)


        MDTextFieldRound:
            id: username
            icon_right: "email"
            helper_text: "Email"
            normal_color: .4, .4, .4, .4

        MDTextFieldRound:
            id: password
            icon_right: "key"
            helper_text: "Password"
            password: True
            normal_color: .4, .4, .4, .4

        ButtonGrid:
            size_hint: .9, None
            height: 10
            pos_hint: {"center_x": .5}
            on_press: print(self.pos)

            BoxLayout:

                MDLabel:
                    valign: "top"
                    text: "Forgot your password/username?"
                    halign: "center"
                    theme_text_color: "Custom"
                    font_style: "Caption"
                    text_color: .4, .4, .4, .4

        MDFillRoundFlatButton:
            text: "Sign In"
            custom_color: .17, .24, .98, 1
            pos_hint: {"center_x": .5}

        BoxLayout:
            size_hint: .9, None
            height: 25
            pos_hint: {"center_x": .5}
            padding: 0, 0, 0, -50

            MDLabel:
                text: "Or sign in with"
                halign: "center"
                theme_text_color: "Custom"
                font_style: "Caption"
                text_color: .4, .4, .4, 1


        GridLayout:
            padding: 0, 10, 0, 0
            spacing: dp(25)
            size_hint: 1, None
            height: 1
            cols: 3
            halign: "center"
            canvas:

                Color:
                    rgba: .4, .4, .4, 1

                Rectangle:
                    size: self.size
                    pos: self.pos

            MDIconButton:
                icon: "google"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

            MDIconButton:
                icon: "facebook-box"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

            MDIconButton:
                icon: "twitter"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

现在应用程序看起来像这样： Application Screen Signin

Answer 1

MDIconButton 具有固定大小，GridLayout 将根据MDIconButton 宽度设置其列宽，最终将所有MDIconButtons 放在左侧。

您可以使用没有固定大小的AnchorLayout 来包含每个MDIconButton。 AnchorLayouts 将各自获得GridLayout 宽度的相同份额，并且默认情况下，将其内容放在其区域的中心。

我已将GridLayout height 更改为self.minimum_height，因此它根据子heights 计算其height。并且 canvas 指令被更改以处理此问题。

    GridLayout:
        padding: 0, 10, 0, 0
        spacing: dp(25)
        size_hint: 1, None
        height: self.minimum_height
        cols: 3
        canvas:
            Color:
                rgba: .4, .4, .4, 1
            Rectangle:
                size: self.width, 1
                pos: self.x, self.y+self.height-1

        AnchorLayout:
            size_hint_y: None
            height: but1.height
            MDIconButton:
                id: but1
                icon: "google"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

        AnchorLayout:
            size_hint_y: None
            height: but2.height
            MDIconButton:
                id: but2
                icon: "facebook-box"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2

        AnchorLayout:
            size_hint_y: None
            height: but3.height
            MDIconButton:
                id: but3
                icon: "twitter"
                user_font_size: "32sp"
                elevation_normal: 12
                md_bg_color: .4, .4, .4, .2