blazor - 如何根据屏幕大小扩展 MudBlazor 扩展面板

Question

这是根据屏幕尺寸扩展mudBlazor扩展面板的努力。

@using MudBlazor.Services
@implements IAsyncDisposable


<MudCard Class="pa-5">

            <MudExpansionPanel Text="Panel One" MaxHeight="150" IsInitiallyExpanded="@(_breakpoint==Breakpoint.Md ? true:false)">
                Panel One Content
            </MudExpansionPanel>
    

</MudCard>

@code
{
    [Inject] IBreakpointService BreakpointListener { get; set; }

    private Breakpoint _breakpoint = new();

    private Guid _subscriptionId;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var subscriptionResult = await BreakpointListener.Subscribe((breakpoint) =>
            {
                _breakpoint= breakpoint ;
                InvokeAsync(StateHasChanged);
            }, new ResizeOptions
            {
                ReportRate = 250,
                NotifyOnBreakpointOnly = true,
            });

            
            _subscriptionId = subscriptionResult.SubscriptionId;
            

            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync() => await BreakpointListener.Unsubscribe(_subscriptionId);
}

我尝试在屏幕尺寸达到 Md 和 Up 时展开面板，否则它应该折叠起来。但它不起作用。这个过程是正确的还是错误的，或者如果你有其他方法可以做到这一点，请帮助我。

Answer 1

这是因为您使用的是 IsInitiallyExpanded。这只从一开始就设置初始状态。如果将其更改为 IsExpanded 它将起作用。请参阅MusExpansionPanelAPI

工作示例/演示

工作代码将是：

@using MudBlazor.Services
@implements IAsyncDisposable

@_breakpoint
<MudCard Class="pa-5">

            <MudExpansionPanel Text="Panel One" MaxHeight="150" IsExpanded="@(_breakpoint==Breakpoint.Md ? true:false)">
                Panel One Content
            </MudExpansionPanel>
    

</MudCard>

@code
{
    [Inject] IBreakpointService BreakpointListener { get; set; }

    private Breakpoint _breakpoint = new();

    private Guid _subscriptionId;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var subscriptionResult = await BreakpointListener.Subscribe((breakpoint) =>
            {
                _breakpoint= breakpoint ;
                InvokeAsync(StateHasChanged);
            }, new ResizeOptions
            {
                ReportRate = 250,
                NotifyOnBreakpointOnly = true,
            });

            
            _subscriptionId = subscriptionResult.SubscriptionId;
            

            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    public async ValueTask DisposeAsync() => await BreakpointListener.Unsubscribe(_subscriptionId);
}