Kivy：无法移动具有按钮行为的 MDIconButton 和 MDLabel 在 Gridlayout 中居中

Question

我是 Kivy 的新手，我想为我的应用制作一个登录屏幕。我有两个问题。首先，在我的 Gridlayout 中，我有 3 个 MDIconbuttons，无论我尝试什么，它们似乎都无法居中。其次，我想要带有文本“忘记您的 password/username？”的 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()

Attendance.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

Kivy：无法移动具有按钮行为的 MDIconButton 和 MDLabel 在 Gridlayout 中居中

Kivy: MDIconButton not centering in Gridlayout and MDLabel with button behavior cannot be moved

python

kivy

kivy-language

python-3.8

kivymd