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

Question

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

主要.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

现在应用程序看起来像这样： 应用程序屏幕登录

Answer 1

的MDIconButton大小是固定的，并且GridLayout会根据MDIconButton宽度设置其列宽，最终将所有的都放在MDIconButtons左边。

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

我已更改GridLayout height为self.minimum_height，因此它是height根据孩子来计算的heights。并且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