MaterialContainerTransform转场时startView显示在endView上层问题求助

问题核心原因及修复方案 #

你遇到的FAB层叠问题核心是共享元素转场配置错误导致原始FAB未被转场逻辑自动隐藏，可按以下步骤逐一修复：

1. 修正转场类型赋值错误

你当前将容器转场赋值给了普通enterTransition，这是错误的：FAB到新页面的容器转换属于共享元素转场，必须赋值给新Fragment的sharedElementEnterTransition属性：

// 新Fragment的onCreate方法内配置
sharedElementEnterTransition = MaterialContainerTransform().apply {
    startView = newRecipeBtn
    endView = binding.recipePager
    scrimColor = Color.TRANSPARENT
    duration = resources.getInteger(R.integer.motion_duration_large).toLong()
    startContainerColor = resources.getColor(R.color.secondaryColor)
    containerColor = resources.getColor(R.color.colorSurface)
    endContainerColor = resources.getColor(R.color.colorSurface)
    // 新增：明确转场方向为进入
    transitionDirection = MaterialContainerTransform.TRANSITION_DIRECTION_ENTER
}

2. 补充共享元素绑定配置

• 给启动页的FAB和新Fragment的recipePager设置完全相同、全局唯一的transitionName，可以在代码中动态设置避免重名：

// 启动页（旧Fragment/Activity）中设置FAB的transitionName
ViewCompat.setTransitionName(newRecipeBtn, "transition_new_recipe")
// 新Fragment的onViewCreated中设置endView的transitionName
ViewCompat.setTransitionName(binding.recipePager, "transition_new_recipe")

• 跳转新Fragment时必须通过事务绑定共享元素：

parentFragmentManager.beginTransaction()
    .addSharedElement(newRecipeBtn, ViewCompat.getTransitionName(newRecipeBtn)!!)
    .replace(R.id.fragment_container, 你的新Fragment实例)
    .addToBackStack(null)
    .commit()

3. 修复现有代码的遗漏配置

你当前的返回转场代码漏了duration赋值，修正如下：

returnTransition = Slide().apply {
    addTarget(R.id.recipe_pager)
    // 补充赋值操作
    duration = resources.getInteger(R.integer.motion_duration_large).toLong()
}

4. 可选排查项

如果修复后仍有层叠问题，检查以下配置：

• 新Fragment的根布局必须设置不透明背景，避免下层FAB透显
• 旧Fragment可补充普通退出转场，避免页面元素残留：

// 旧Fragment的onCreate中添加
exitTransition = Fade().apply {
    duration = resources.getInteger(R.integer.motion_duration_large).toLong()
}

• 可关闭转场默认的海拔阴影避免层级干扰：在MaterialContainerTransform的apply块中添加isElevationShadowEnabled = false

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