如何在Flutter中实现下图所示的卡片滚动效果？

针对你需要的垂直居中卡片突出显示、上下卡片缩放+半透明、所有卡片宽度一致的效果，提供几个可行实现方向：

1. 基于ViewPager2自定义PageTransformer #

直接用官方ViewPager2实现更灵活可控，步骤如下：

• 将ViewPager2设置为垂直滚动方向：viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL
• 自定义PageTransformer，在transformPage方法中统一固定所有卡片宽度，同时根据页面偏移量处理缩放、透明度和位移：

核心代码示例（Kotlin）：

class VerticalCardTransformer(private val context: Context) : ViewPager2.PageTransformer {
    private val maxScale = 1.0f
    private val minScale = 0.8f
    private val maxAlpha = 1.0f
    private val minAlpha = 0.5f
    // 固定卡片宽度为屏幕宽度的80%
    private val fixedCardWidth = (context.resources.displayMetrics.widthPixels * 0.8f).toInt()

    override fun transformPage(page: View, position: Float) {
        page.apply {
            // 强制设置所有卡片宽度一致
            layoutParams.width = fixedCardWidth
            val absPosition = kotlin.math.abs(position)
            
            // 缩放：偏离中心的卡片缩小
            scaleY = maxScale - (maxScale - minScale) * absPosition
            // 透明度：偏离中心的卡片降低透明度
            alpha = maxAlpha - (maxAlpha - minAlpha) * absPosition
            // 垂直位移：让卡片堆叠更有层次感
            translationY = position * height * 0.3f
        }
    }
}

然后给ViewPager2绑定这个Transformer：

viewPager2.setPageTransformer(VerticalCardTransformer(this))

2. 修复现有VerticalCardPager的问题 #

如果坚持使用VerticalCardPager，检查并修改以下关键点：

• 确保所有卡片布局的根视图layout_width设为固定值或match_parent，避免wrap_content导致宽度不一致
• 找到VerticalCardPager中控制卡片宽度的测量逻辑，替换为固定值（比如基于屏幕宽度计算），而不是依赖父容器的动态测量
• 排查页面变换逻辑，确保仅修改卡片的缩放、透明度和位移，不改变其宽度属性

3. 自定义RecyclerView LayoutManager #

如果需要更复杂的交互（如无限滚动、自定义间距），可以用RecyclerView+自定义垂直LayoutManager：

• 重写onLayoutChildren方法，手动计算每个item的摆放位置
• 监听RecyclerView的滚动事件，实时计算每个item相对于中心位置的偏移量
• 根据偏移量动态调整item的缩放比例、透明度，同时固定所有item的宽度

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