如何监听ActionBar的可见性变化？有对应可用的事件或布局回调吗？

原生Web端（H5/单页应用场景） #

• MutationObserver 监听DOM属性变化
  通用性最强的方案，直接监听ActionBar元素的class、style属性变化，判断显隐状态：

  const actionBar = document.querySelector('#action-bar');
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(mutation => {
      if (['class', 'style'].includes(mutation.attributeName)) {
        const isHidden = actionBar.offsetParent === null 
                      || window.getComputedStyle(actionBar).display === 'none';
        // 执行你的布局调整逻辑
        adjustBackdropLayout(isHidden);
      }
    });
  });
  observer.observe(actionBar, { attributes: true });
  

• ResizeObserver 监听元素尺寸变化
  如果ActionBar隐藏时高度会变为0，用该方案更直接，无需判断属性变化：

  const resizeObserver = new ResizeObserver(entries => {
    const actionBarHeight = entries[0].contentRect.height;
    const isActionBarHidden = actionBarHeight === 0;
    adjustBackdropLayout(isActionBarHidden);
  });
  resizeObserver.observe(actionBar);
  

• 自定义事件监听
  如果你可以控制ActionBar的显隐逻辑，该方案性能最优：

  // ActionBar显隐逻辑处派发自定义事件
  function toggleActionBar(visible) {
    actionBar.classList.toggle('hidden', !visible);
    window.dispatchEvent(new CustomEvent('actionBarVisibilityChange', { detail: { visible } }));
  }
  // 监听事件执行布局调整
  window.addEventListener('actionBarVisibilityChange', (e) => {
    adjustBackdropLayout(e.detail.visible);
  });
  

安卓原生应用场景 #

• OnApplyWindowInsetsListener 窗口边距变化回调
  ActionBar显隐会触发系统窗口边距变化，直接监听该回调即可拿到高度变化：

  ViewCompat.setOnApplyWindowInsetsListener(rootView) { view, insets ->
    val actionBarHeight = insets.getInsets(WindowInsetsCompat.Type.systemBars()).top
    val isActionBarHidden = actionBarHeight == 0
    view.updatePadding(top = if (isActionBarHidden) 0 else actionBarHeight)
    insets
  }
  

• ViewTreeObserver.OnGlobalLayoutListener 全局布局变化回调
  监听整个视图树的重绘事件，每次布局更新时判断ActionBar可见性：

  actionBar.viewTreeObserver.addOnGlobalLayoutListener {
    val isHidden = actionBar.visibility != View.VISIBLE
    adjustBackdropPosition(isHidden)
  }
  

• ActionBar.OnMenuVisibilityListener 系统自带回调
  直接给ActionBar注册官方显隐监听，状态变化时系统自动触发回调：

  supportActionBar?.addOnMenuVisibilityListener { isVisible ->
    adjustBackdropPosition(isVisible)
  }
  

前端框架场景（React/Vue等） #

• 优先采用状态同步方案：将ActionBar的显隐状态存储在公共状态管理容器（Redux/Pinia等）或者父组件状态中，backdrop组件直接消费该状态做布局调整，性能最好且逻辑更易维护
• 如果无法拿到状态，可通过ref获取ActionBar的DOM实例，在生命周期钩子/副作用钩子中注册上文提到的MutationObserver或者ResizeObserver做监听

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