KivyMD2中MDTextField与MDButton水平布局空间分配异常及垂直间距过大问题求助

嘿，我看你在Pydroid3里用KivyMD2开发时踩了两个布局坑，这俩问题我之前也碰到过，给你捋捋怎么快速解决：

问题1：水平布局中TextField占满宽度，按钮空间被挤压 #

你设置size_hint_x没生效，核心原因有两个：

• 自定义TxtField类里加了pos_hint={"center_x": .5}，这会让TextField在水平布局里强行居中，抢占更多空间，直接把按钮挤到角落
• 自定义mkbtn类里写了wide = dp(120)，但没给按钮绑定实际的width属性，等于白设置了宽度值

修改方案：

1. 删掉TxtField里的pos_hint={"center_x": .5}，并给TextField设置合理的size_hint_x比例（比如0.7，给按钮留0.3的空间）
2. 在mkbtn里把self.wide = dp(120)改成self.width = dp(120)，让按钮拥有固定宽度；或者保留size_hint_x=None的同时设置size_hint_min_x=dp(100)，确保按钮不会被挤扁

问题2：水平布局行之间垂直间距过大 #

你当前的content_layout设了spacing=dp(10)，再加上每个水平布局自己的padding=[5,5,5,5]，叠加起来就显得间距特别宽。另外最后添加的MDWidget()会占据剩余垂直空间，但不是间距问题的核心。

修改方案：

• 把content_layout的spacing调小（比如改成dp(5)），直接减少行与行的空隙
• 删掉每个水平布局（hlay1到hlay5）里的padding，因为外层content_layout已经有padding了，重复设置会徒增不必要的间距

修正后的完整代码 #

from kivymd.app import MDApp
from kivymd.uix.screen import MDScreen
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.appbar import MDTopAppBar, MDTopAppBarTitle
from kivymd.uix.label import MDLabel
from kivymd.toast import toast
from kivymd.uix.button import MDButton, MDButtonIcon, MDButtonText
from kivymd.uix.widget import MDWidget
from kivymd.icon_definitions import md_icons
from kivymd.uix.textfield import (
    MDTextField, MDTextFieldHintText, MDTextFieldMaxLengthText
)
from kivymd.uix.segmentedbutton import (
    MDSegmentedButton, MDSegmentedButtonItem, MDSegmentButtonLabel
)
from kivymd.uix.dialog import (
    MDDialog, MDDialogHeadlineText, MDDialogSupportingText, MDDialogButtonContainer
)
from kivy.uix.widget import Widget
from kivy.core.window import Window
from kivy.core.text import Label as CoreLabel
from kivy.metrics import dp

class TxtField(MDTextField):
    def __init__(self, ilen = 7, htxt="", shintx=0.7, **kwargs):
        super().__init__(**kwargs)
        self.mode = "outlined"
        # 移除干扰水平布局的pos_hint
        self.size_hint_x = shintx  # 用参数灵活控制宽度比例
        self.input_filter = lambda s, u: s if ( len(self.text) < ilen and s.isdigit() ) else ""
        if not htxt:
            htxt = "input:"
        self.add_widget(MDTextFieldHintText(text=htxt))

class mkbtn(MDButton):
    def __init__( self, text, style="elevated",
        icon=None, func=lambda x: dummy_func(x), **kwargs):
        super().__init__(**kwargs)
        self.style = style
        self.size_hint_x = None  # 固定宽度模式
        self.width = dp(120)  # 给按钮设置实际宽度
        # 移除水平布局中不必要的居中设置
        if icon:
            self.add_widget(MDButtonIcon(icon))
        self.add_widget(MDButtonText(text=text))
        self.bind(on_release=func)

def dummy_func(x="", y=""):
    pass

class MainScreen(MDScreen):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.md_bg_color = [1, 1, 1, 1]
        self.main_layout = MDBoxLayout(orientation="vertical")
        self.app_bar = MDTopAppBar(type="small")
        self.abtitle = MDTopAppBarTitle(
            text="WOS Squad Ratio (Bear/CJ)",
            halign="center"
        )
        self.app_bar.add_widget(self.abtitle)

        # 缩小垂直间距，让布局更紧凑
        self.content_layout = MDBoxLayout(orientation="vertical", padding=[5, 5, 5, 5], spacing=dp(5),)

        # 移除每个水平布局的padding，避免重复叠加间距
        self.hlay1 = MDBoxLayout(orientation="horizontal", spacing=dp(10))
        self.bdctf = TxtField(htxt="Bear DC", ilen=6, shintx=0.7)
        self.prof_btn = mkbtn("Profiles", icon="triangle-small-down")
        self.hlay1.add_widget(self.bdctf)
        self.hlay1.add_widget(self.prof_btn)

        self.hlay2 = MDBoxLayout(orientation="horizontal", spacing=dp(10))
        self.cdctf = TxtField(htxt="CJ DC", ilen=6, shintx=0.7)
        self.aprof_btn = mkbtn("Add Profiles")
        self.hlay2.add_widget(self.cdctf)
        self.hlay2.add_widget(self.aprof_btn)

        self.hlay3 = MDBoxLayout(orientation="horizontal", spacing=dp(10))
        self.titf = TxtField(htxt="Total Infantry", ilen=7, shintx=0.7)
        self.cb_btn = mkbtn("Calc Bear")
        self.hlay3.add_widget(self.titf)
        self.hlay3.add_widget(self.cb_btn)

        self.hlay4 = MDBoxLayout(orientation="horizontal", spacing=dp(10))
        self.tltf = TxtField(htxt="Total Lancer", ilen=7, shintx=0.7)
        self.cc_btn = mkbtn("Calc CJ")
        self.hlay4.add_widget(self.tltf)
        self.hlay4.add_widget(self.cc_btn)

        self.hlay5 = MDBoxLayout(orientation="horizontal", spacing=dp(10))
        self.tmtf = TxtField(htxt="Total Lancer", ilen=7, shintx=0.7)
        self.sd_btn = mkbtn("Save Data")
        self.hlay5.add_widget(self.tmtf)
        self.hlay5.add_widget(self.sd_btn)

        self.tlbl = MDLabel(halign="left",role="large",padding=[5, 0, 0, 5],text = "")
        def cng_lbl(txt):
            self.tlbl.text = txt

        self.content_layout.add_widget(self.hlay1)
        self.content_layout.add_widget(self.hlay2)
        self.content_layout.add_widget(self.hlay3)
        self.content_layout.add_widget(self.hlay4)
        self.content_layout.add_widget(self.hlay5)
        # 如需底部留白可保留MDWidget，否则删除让布局更紧凑
        self.content_layout.add_widget(MDWidget())

        self.main_layout.add_widget(self.app_bar)
        self.main_layout.add_widget(self.content_layout)

        self.add_widget(self.main_layout)

class MyApp(MDApp):
    def build(self):
        root = MainScreen()
        return root

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

关键改动总结 #

1. 水平宽度分配：

   • 移除TxtField的pos_hint，让水平BoxLayout正常分配组件宽度
   • 给mkbtn设置固定width，确保按钮有足够的显示空间
   • 给TxtField添加shintx参数，可灵活调整TextField的宽度比例

2. 垂直间距优化：

   • 缩小content_layout的spacing值，减少行与行之间的空隙
   • 移除每个水平布局的padding，避免和外层布局的padding重复叠加

这样修改后，TextField和按钮就能按预期分配宽度，垂直布局也会紧凑很多啦！

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