绑定状态后MudDrawer无法关闭问题咨询（移动端/缩放场景）

使用MudDrawer组件，将其Open属性绑定到全局状态GlobaleState.IsDrawerOpen：

<MudDrawer Open="GlobaleState.IsDrawerOpen">
    <MudDrawerHeader>
        <MudText Typo="Typo.h5" Class="mt-1">Title</MudText>
    </MudDrawerHeader>
    <NavMenu />
    <MudSpacer />
    <MudDivider />
    <MudContainer>
        <MudToggleIconButton />
    </MudContainer>
</MudDrawer>

通过MudAppBar中的按钮触发OnIsDrawerOpenChanged方法切换状态：

<MudAppBar>
    <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="OnIsDrawerOpenChanged" />
</MudAppBar>

正常显示尺寸下功能正常，但在移动端或大幅缩放时无法关闭MudDrawer的遮罩。此前未绑定状态、使用双向绑定时该功能正常，询问问题原因及解决办法。

问题原因 #

当前用的是单向绑定Open="GlobaleState.IsDrawerOpen"，这种绑定仅允许组件读取外部状态值，无法主动修改它。移动端模式下点击遮罩关闭抽屉时，组件内部会尝试更新Open状态，但单向绑定的限制导致这个变更无法同步到全局状态GlobaleState.IsDrawerOpen，最终状态不一致，遮罩无法正常关闭。

而双向绑定（@bind-Open="GlobaleState.IsDrawerOpen"）会自动关联Open属性和OpenChanged事件，组件内部的状态变更能自动同步到外部全局状态，所以之前双向绑定时功能正常。

解决办法 #

有两种可行方案：

• 方案一：改用双向绑定
  直接将Open属性改为双向绑定语法，无需额外处理事件：

  <MudDrawer @bind-Open="GlobaleState.IsDrawerOpen">
      <!-- 抽屉内容 -->
  </MudDrawer>
  

  这样移动端点击遮罩时，组件会自动同步状态到GlobaleState.IsDrawerOpen，遮罩可正常关闭。

• 方案二：手动处理OpenChanged事件（保留单向绑定场景）
  如果必须使用单向绑定，需要监听MudDrawer的OpenChanged事件，在回调中手动更新全局状态：

  <MudDrawer Open="GlobaleState.IsDrawerOpen" OpenChanged="OnDrawerOpenChanged">
      <!-- 抽屉内容 -->
  </MudDrawer>
  

  然后在代码中实现事件处理方法：

  private void OnDrawerOpenChanged(bool isOpen)
  {
      GlobaleState.IsDrawerOpen = isOpen;
  }
  

  这样组件内部的状态变更会通过事件回调同步到全局状态，解决遮罩无法关闭的问题。

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