Flutter中使用Matrix4实现缩放平滑页面过渡效果异常排查

你的代码存在4处直接导致效果异常的问题：

• 冗余赋值：多个判断分支中先给matrix赋值了仅做缩放的矩阵，紧接着又覆盖为带平移的矩阵，前一行代码完全无效，属于无意义冗余写法。
• Z轴参数错误：非相邻页面的else分支中，setTranslationRaw第三个参数（Z轴偏移）传值为1，其余分支均传0，Z轴偏移不一致会导致页面渲染层级错乱，出现遮挡、错位问题。
• 缩放值硬编码：else分支直接写死缩放值为0.8，没有和你定义的_scaleFactor变量绑定，修改_scaleFactor时非相邻页面缩放比例不会同步更新，滑动时会出现缩放断层。
• 计算逻辑冗余重复：相邻左页、当前页的矩阵计算逻辑完全重复，额外增加了维护成本。

修复后的完整代码 #

Widget _buildPageItem (int index){
    Matrix4 matrix = Matrix4.identity();
    final double minScale = _scaleFactor;
    if (index == _currPageValue.floor()){
      // 当前页缩放、平移计算
      var currScale = 1-(_currPageValue-index)*(1-minScale);
      var currTrans = _height*(1-currScale)/2;
      matrix = Matrix4.diagonal3Values(1, currScale, 1)..setTranslationRaw(0, currTrans, 0);
    }else if (index == _currPageValue.floor()+1){
      // 右侧相邻页缩放、平移计算，修正公式参数保证连续
      var currScale = minScale+(_currPageValue-index+1)*(1-minScale);
      var currTrans = _height*(1-currScale)/2;
      matrix = Matrix4.diagonal3Values(1, currScale, 1)..setTranslationRaw(0, currTrans, 0);
    }else if (index == _currPageValue.floor()-1){
      // 左侧相邻页缩放、平移计算
      var currScale = 1-(_currPageValue-index)*(1-minScale);
      var currTrans = _height*(1-currScale)/2;
      matrix = Matrix4.diagonal3Values(1, currScale, 1)..setTranslationRaw(0, currTrans, 0);
    }else{
      // 非相邻页统一使用最小缩放值，Z轴偏移和其他分支保持一致
      var currScale = minScale;
      var currTrans = _height*(1-currScale)/2;
      matrix = Matrix4.diagonal3Values(1, currScale, 1)..setTranslationRaw(0, currTrans, 0);
    }

    return Transform(
      transform: matrix,
      alignment: Alignment.center,
      child: // 替换为你原有的页面子组件
    );
}

额外注意事项 #

• 确保_currPageValue是在PageController的滑动监听中实时获取的page属性（double类型），不要使用取整后的int值，否则滑动过程不会触发连续的矩阵更新，过渡会出现卡顿、跳变。
• PageView的viewportFraction参数建议设置为0.8~0.9，配合缩放效果视觉体验最佳。
• 如果出现页面点击热区错位的问题，可以给Transform组件设置alignment: Alignment.center，或者拆分为Transform.scale嵌套Transform.translate的写法，避免矩阵变换导致的手势区域偏移。

内容的提问来源于stack exchange，提问作者Júnior Nogueira