You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

KivyMD中MDTabs标签居中且等宽显示问题求助

解决KivyMD中MDTabs标签居中及等宽问题

在KivyMD项目里给MDTabs组件添加两个Tab后,标签默认靠左排列,且尺寸随内容变化,无法实现居中显示+等宽效果,可通过调整组件属性解决:

原问题代码

MDTabs:
    size_hint: 0.25, 0.25
    pos_hint: {'center_x': 0.5,'center_y': 0.5}
    halign: "center"
    Tab: 
        pos_hint: {'center_x': 0.5,'center_y': 0.5}
        halign: "center"
        icon: 'ab-testing'
        text: 'jfa'
        title: "mfnvjkf"
        MDLabel:
            text: "njdvslns"
            size_hint: 1,1
            halign: "center"
    Tab: 
        pos_hint: {'center_x': 0.5,'center_y': 0.5}
        halign: "center"
        icon: 'ab-testing'
        text: 'jfhbjva'
        title: "mf"
        MDLabel:
            text: "njs"
            size_hint: 1,1
            halign: "center"

解决方案及修改后代码

核心调整点:

  • 移除Tab上的pos_hint,MDTabs会自动管理Tab的布局位置
  • 给MDTabs设置tab_width属性,强制所有Tab宽度一致
  • 调整MDTabs的size_hint_x,确保宽度足够容纳两个Tab
  • 保留MDTabs的halign: "center"实现整体居中

修改后的代码:

MDTabs:
    size_hint: 0.8, 0.25  # 增大宽度占比,确保能放下两个Tab
    pos_hint: {'center_x': 0.5,'center_y': 0.5}
    halign: "center"
    tab_width: self.width / 2  # 每个Tab占MDTabs宽度的一半,实现等宽
    Tab: 
        icon: 'ab-testing'
        text: 'jfa'
        title: "mfnvjkf"
        MDLabel:
            text: "njdvslns"
            size_hint: 1,1
            halign: "center"
    Tab: 
        icon: 'ab-testing'
        text: 'jfhbjva'
        title: "mf"
        MDLabel:
            text: "njs"
            size_hint: 1,1
            halign: "center"

补充说明

  • 若不想用tab_width,也可以给每个Tab设置size_hint_x: 0.5,同样能实现等宽
  • 若MDTabs的size_hint_x设为1,tab_width可设为固定值(比如200),根据实际需求调整

内容的提问来源于stack exchange,提问作者WhoamI

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 03:17:05