如何实现Extended FAB与Standard FAB的双向转换？

嘿，刚好我之前做过这个转换功能，给你分享下具体怎么实现，其实没你想的那么复杂！

首先，如果你用的是Material Components官方库（不管是Android、Web还是其他平台），其实已经内置了现成的转换方法，完全不用自己从零写动画，先给你说最省心的官方方案：

官方内置方案（推荐） #

以Android为例，ExtendedFloatingActionButton本身就提供了shrink()和extend()两个方法，分别对应「转成Standard FAB」和「反向展开」，而且自带符合Material Design规范的平滑动画。

结合你已经会的滚动阈值检测，只需要在滚动监听里触发这两个方法就行：

// 给RecyclerView添加滚动监听
recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        // 这里的判断逻辑可以根据你的需求调整，比如向上滚动超过10px就收缩
        if (dy > 10 && extendedFab.isExtended) {
            extendedFab.shrink() // 收缩成Standard FAB
        } 
        // 向下滚动超过10px且已经收缩的话，就展开回Extended FAB
        else if (dy < -10 && !extendedFab.isExtended) {
            extendedFab.extend()
        }
    }
})

要是你用的是Web端的Material UI，思路也类似：通过状态控制Fab的variant属性，配合滚动监听切换状态即可：

import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import { useState } from 'react';

function ScrollControlledFab() {
  const [isExtended, setIsExtended] = useState(true);

  // 这里替换成你的滚动监听逻辑，检测阈值后修改isExtended
  const handleScroll = () => {
    const scrollY = window.scrollY;
    if (scrollY > 100 && isExtended) {
      setIsExtended(false);
    } else if (scrollY < 50 && !isExtended) {
      setIsExtended(true);
    }
  };

  window.addEventListener('scroll', handleScroll);

  return (
    <Fab variant={isExtended ? "extended" : "circular"}>
      <AddIcon />
      {isExtended && <span>添加内容</span>}
    </Fab>
  );
}

自定义动画方案（如果官方动画不符合需求） #

要是你需要更个性化的转换效果，可以自己写属性动画来控制FAB的尺寸、文字可见性、图标位置：

比如Android里自定义收缩动画的示例：

fun customShrinkFab(extendedFab: ExtendedFloatingActionButton) {
    // 1. 收缩FAB宽度到标准尺寸
    val originalWidth = extendedFab.width
    val targetWidth = extendedFab.minWidth // 标准FAB的默认宽度
    val widthAnimator = ValueAnimator.ofInt(originalWidth, targetWidth)
    widthAnimator.duration = 250
    widthAnimator.addUpdateListener { anim ->
        val params = extendedFab.layoutParams
        params.width = anim.animatedValue as Int
        extendedFab.layoutParams = params
    }

    // 2. 隐藏文字标签
    val labelAnimator = extendedFab.labelView.animate().alpha(0f).setDuration(250)

    // 3. 同时执行两个动画
    AnimatorSet().apply {
        playTogether(widthAnimator, labelAnimator)
        start()
    }

    // 记得更新FAB的状态标记
    extendedFab.isExtended = false
}

自定义展开动画就是反向操作：扩大宽度、显示文字、移动图标到左侧，逻辑是一样的。

注意事项 #

• 确保你依赖了最新版本的Material Components库，不然可能没有这些方法（比如Android要在build.gradle里加implementation 'com.google.android.material:material:1.+'）
• 滚动阈值的判断逻辑可以根据你的UI需求调整，比如不是看滚动距离，而是看第一个列表项是否完全可见

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