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

存在MDNavigationRail时MDFloatingActionButtonSpeedDial不显示问题求助

问题:MDFloatingActionButtonSpeedDial在MDNavigationRail存在时无法显示

我在KivyMD项目中添加MDFloatingActionButtonSpeedDial按钮后,按钮始终不显示;但移除MDNavigationRail组件后,按钮就能正常显示,全程没有任何报错信息。相关代码如下:

main.py

from kivymd.app import MDApp
from kivy.uix.screenmanager import ScreenManager, Screen
from kivymd.uix.datatables import MDDataTable
from kivy.metrics import dp

class CfgScreen(Screen):
    
    data = {
        "Add user": "account-plus-outline",
        "Edit user": "account-edit-outline",
        "Delete user":"account-remove-outline"
        }

    my_label = "Wazap!"

    rdata = [("a","b","c","d","e"),("a","b","c","d","e"),("a","b","c","d","e")]

    def __init__(self, **kwargs):
        super(CfgScreen, self).__init__(**kwargs)
        
    def on_pre_enter(self):
        self.create_ua_table()

    def create_ua_table(self):
        table_ua = MDDataTable(
            column_data=[
                ("Username", dp(50)),
                ("Password", dp(100)),
                ("Level", dp(40)),
                ("Email", dp(70)),
                ("Company", dp(50))
            ],
            row_data=self.rdata,
            sorted_on="Username",
            sorted_order="ASC",
            elevation=2
        )
        self.ids.screen_cfg_user_account.add_widget(table_ua)

class MainApp(MDApp):   

    def build(self):
        self.title = "Banana BMS"
        self.theme_cls.primary_palette = "Teal"
        self.theme_cls.primary_hue = "500"

        sm = ScreenManager()
        sm.add_widget(CfgScreen(name="cfg"))

        return sm

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

main.kv

CfgScreen:

<CfgScreen>:
    name: "cfg"
    sm_cfg: sm_cfg
    scroll: scroll
    screen_cfg_user_account: screen_cfg_user_account
    canvas.before:
        Color:
            rgba: 242/255.00, 242/255.00, 242/255.00
        Rectangle:
            pos: self.pos
            size: self.size
    BoxLayout:
        orientation: "vertical"
        MDTopAppBar:
            title: "Topbar"
            elevation: 10
            md_bg_color: app.theme_cls.primary_color
            specific_text_color: 242/255.00, 242/255.00, 242/255.00
            canvas.before:
                Color:
                    rgba: app.theme_cls.primary_color
                Rectangle:
                    pos: self.pos
                    size: self.size
        BoxLayout:
            orientation: "horizontal"
            MDNavigationRail:
                id: navigation_rail
                md_bg_color: app.theme_cls.primary_color
                selected_color_background: "#F2F2F2"
                ripple_color_item: 242/255.00, 242/255.00, 242/255.00
                specific_text_color: 242/255.00, 242/255.00, 242/255.00
                icon_color_item_normal: 242/255.00, 242/255.00, 242/255.00
                icon_color_item_active: app.theme_cls.primary_color
                anchor: "center"
                type: "unselected"
                size_x: 0.3
                MDNavigationRailItem:
                    icon: "account-details-outline"
                MDNavigationRailItem:
                    icon: "account-card-outline"
                MDNavigationRailItem:
                    icon: "database-settings-outline"
            ScreenManager:
                id: sm_cfg
                canvas.before:
                    Color:
                        rgba: 242/255.00, 242/255.00, 242/255.00
                    Rectangle:
                        pos: self.pos
                        size: self.size
                Screen:
                    name: "cfg_user_account"
                    MDLabel:
                        text: root.my_label
                        halign: "center"
                    MDScrollView:
                        id: scroll
                        size_hint: 0.9, 0.7
                        pos_hint:{'x': 0.05, 'center_y': 0.45}
                        RelativeLayout:
                            id: screen_cfg_user_account
                            #orientation: "vertical"
                    MDFloatingActionButtonSpeedDial:
                        data: root.data
                        root_button_anim: True
原因分析与解决方案

核心原因

问题出在布局宽度分配冲突:

  • 横向BoxLayout中同时放置了MDNavigationRail(设置了size_x:0.3)和ScreenManager,但ScreenManager默认size_hint_x:1,导致布局计算时ScreenManager的实际宽度被挤压后超出窗口可视范围。而MDFloatingActionButtonSpeedDial默认定位在屏幕右下角,自然就被推到了可视区域外。

修复方案

给ScreenManager设置对应的size_hint_x,让它占据剩余的70%宽度,同时可选微调浮动按钮位置避免边缘裁剪:

修改main.kv中的ScreenManager部分:

ScreenManager:
    id: sm_cfg
    size_hint_x: 0.7  # 添加这一行,匹配NavigationRail的0.3宽度
    canvas.before:
        Color:
            rgba: 242/255.00, 242/255.00, 242/255.00
        Rectangle:
            pos: self.pos
            size: self.size
    Screen:
        name: "cfg_user_account"
        # ... 其他组件
        MDFloatingActionButtonSpeedDial:
            data: root.data
            root_button_anim: True
            pos_hint: {'right': 0.95, 'bottom': 0.05}  # 可选:微调按钮位置,避免贴边

修改后,ScreenManager会正确占据窗口剩余的70%宽度,浮动按钮会显示在可视区域内,同时保留MDNavigationRail组件的功能。

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.21 16:09:14