Blazor 中 FluentMultiSplitter 面板无法调整怎么办？

2026-11-06数据阿明

结论

先确认页面是否启用了 Blazor 交互渲染。静态 SSR 页面中的组件事件和拖动交互不会运行。添加 AddHttpClient()、扩展命名空间或脚本标签，都不能替代交互渲染配置。

问题中的 OnResizeHandler 为空，OnCollapseExpand 也只计算了一个未使用的局部变量。这些处理器不会主动调整面板，但通常不会妨碍组件自行处理拖动和折叠。如果外层和内层都没有反应，先检查页面是否启用了交互模式。

检查 Blazor 渲染模式

如果使用 Interactive Server，需要在服务和端点中启用相应支持。例如，Program.cs 中应包含类似配置：

builder.Services
    .AddRazorComponents()
    .AddInteractiveServerComponents();

// ...

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

还要让包含 FluentMultiSplitter 的页面或其上级组件进入交互模式。例如，在 Routes.razor 或页面上设置：

@rendermode InteractiveServer

具体写法取决于项目选择的渲染模式和模板结构。使用 Interactive WebAssembly 或 Interactive Auto 时，应启用对应的模式和服务配置。先检查模板生成的 Program.cs、App.razor 和 Routes.razor，确认是否已有相关配置，避免重复注册。

再检查嵌套面板尺寸

示例为外层 splitter 设置了 Height="150px"，但没有为内层垂直 splitter 指定高度。确认内层组件在父面板中有可用高度。如果需要让它填满父面板，可以尝试为内层设置明确的高度，并检查父级布局是否限制了高度。例如：

<FluentMultiSplitter
    OnResize="@OnResizeHandler"
    OnExpand="@OnCollapseExpand"
    OnCollapse="@OnCollapseExpand"
    Orientation="Orientation.Vertical"
    Height="100%">

这一步用于排查布局问题。如果外层也完全无法拖动，先确认页面是否处于交互渲染模式。

事件处理器的作用

OnResize、OnExpand 和 OnCollapse 用于接收组件事件，可以留空。如果需要在事件发生后更新应用状态，再根据事件参数处理。当前 OnCollapseExpand 中的 willCollapse 没有被使用，因此不会产生额外效果，也无法解决面板无响应的问题。

确认交互模式和尺寸后，如果问题仍然存在，再检查项目实际使用的 Microsoft.FluentUI.AspNetCore.Components 版本及该版本对应的 MultiSplitter 文档，确保组件用法和资源配置与安装版本相符。仅凭问题中的代码无法确定具体版本，也无法断言是否需要手动添加 JavaScript 模块脚本。