FluentUI对话框与FluentStack无法水平显示问题求助

核心问题 #

你遇到的元素全垂直堆叠问题，大概率是FluentUI Blazor的核心CSS样式未正确引入导致的。FluentUI组件依赖自身CSS实现布局逻辑（比如flex水平排列），如果样式缺失，浏览器会默认按块级元素规则垂直堆叠所有元素。

排查修复步骤 #

1. 检查基础样式引入 #

先确认项目wwwroot/index.html中是否正确引入FluentUI的CSS文件，顺序不能乱：

<!-- 必须先引入基础样式 -->
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/fluentui.min.css" rel="stylesheet" />
<!-- 可选：主题样式，按需添加 -->
<link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/theme-light.css" rel="stylesheet" />

同时确保Program.cs中已注册FluentUI服务：

builder.Services.AddFluentUIComponents();

2. 修复对话框标题栏水平排列 #

如果用自定义头部，要关闭默认标题避免冲突，同时确保FluentStack的水平布局生效：

• 打开对话框时移除Title参数：

DialogParameters dialogParameters = new()
{
    // 删掉Title配置，用自定义头部替代
    PrimaryAction = "Ok",
    PrimaryActionEnabled = true,
    SecondaryAction = "Cancel",
    SecondaryActionEnabled = true,
    PreventDismissOnOverlayClick = true,
    Width = "500px",
    TrapFocus = true,
    Modal = true,
    PreventScroll = true
};

• 自定义头部代码调整：

<FluentDialogHeader ShowDismiss="true">
    <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center" Gap="12px">
        <FluentIcon Value="@(new Icons.Regular.Size24.WindowFingerprint())" />
        <FluentLabel Typo="Typography.PaneHeader">Login to Site</FluentLabel>
    </FluentStack>
</FluentDialogHeader>

3. 修复FluentLayout水平排列 #

在MainLayout中使用FluentLayout时，明确指定水平方向，同时避免父容器强制垂直布局：

<FluentLayout Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="16px">
    <FluentIcon Value="@(new Icons.Regular.Size24.Home())" />
    <FluentLabel Typo="Typography.TitleLarge">站点头部</FluentLabel>
</FluentLayout>

4. 排除残留样式冲突 #

虽然移除了SyncFusion组件，还是要检查：

• 删除wwwroot/css下无关的样式文件
• 检查全局样式是否有* { display: block; }这类强制块级元素的规则

验证方法 #

修改后重启项目，查看对话框标题栏、表单元素是否水平排列，同时检查MainLayout的布局效果。如果仍有问题，用浏览器开发者工具查看元素CSS，确认FluentUI的flex相关样式是否被正确应用。

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