如何将MudAppBar背景设为线性渐变并居中MudText

1. 设置线性渐变背景 #

通过自定义CSS类为MudAppBar添加渐变背景，具体步骤：

• 在组件内嵌入<style>块定义渐变样式
• 为MudAppBar指定自定义类名

2. 实现MudText在AppBar中居中 #

借助Flex布局特性，让文本占据AppBar中间的可用空间并水平居中，调整内部元素结构即可完成。

修改后的完整代码 #

<MudThemeProvider />
<MudDialogProvider />
<MudSnackbarProvider />

<style>
    .gradient-appbar {
        background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
        /* 可根据需求自行修改渐变方向和颜色值 */
    }
</style>

<MudLayout>

    <MudAppBar Elevation="1" Class="gradient-appbar d-flex align-items-center">
        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="@((e) => DrawerToggle())" />
        <!-- flex-grow-1 让文本占据左右按钮间的所有可用空间，text-center 实现水平居中 -->
        <MudText Typo="Typo.h4" Class="flex-grow-1 text-center">My Application</MudText>
        <MudIconButton Icon="@Icons.Material.Filled.MoreVert" Color="Color.Inherit" Edge="Edge.End" />
    </MudAppBar>

    <MudDrawer @bind-Open="_drawerOpen" ClipMode="DrawerClipMode.Docked" Elevation="2">
        <NavMenu/>
    </MudDrawer>
    
    <MudMainContent>        
        <MudContainer MaxWidth="MaxWidth.ExtraLarge">
            @Body
        </MudContainer>
    </MudMainContent>

</MudLayout>
@code {
    bool _drawerOpen = true;

    void DrawerToggle()
    {
        _drawerOpen = !_drawerOpen;
    }
}

关键说明 #

• 渐变背景：自定义.gradient-appbar类，使用CSSlinear-gradient属性设置渐变效果，可按需调整颜色组合和渐变角度
• 文本居中：给MudText添加flex-grow-1使其填充左右按钮之间的空间，text-center实现水平居中；同时移除了原有的<MudSpacer>，因为flex-grow-1已完成空间填充的功能

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