Contents

将 AnimationSheetBuilder.display 替换为 collate

Contents

摘要
背景
变更描述
迁移指南
- 推导每行单元格数
- 代码迁移
时间线
参考

AnimationSheetBuilder.display 和 sheetSize 方法已弃用，应替换为 AnimationSheetBuilder.collate。

AnimationSheetBuilder 是一个测试实用程序类，用于记录动画小部件的帧，然后将这些帧组合成单个动画表用于黄金测试。旧的组合方法涉及使用 display 将图像列入类似表格的小部件中，使用 sheetSize 调整测试表面，并捕获表格小部件进行比较。现在添加了一种新方法 collate，它直接将帧组合成一张图像进行比较，这需要更少的样板代码，并输出更小的图像，而不会影响质量。因此，旧方法的 API 已被弃用。

collate 输出较小图像的原因是，旧方法在像素比为 3.0 的测试表面上进行捕获，这意味着它使用 3x3 像素的完全相同颜色的块来表示 1 个实际像素，使图像的大小是不必要的 9 倍（在 PNG 压缩之前）。

对 AnimationSheetBuilder 类进行了以下更改：

display 已弃用，不应使用
sheetSize 已弃用，不应使用

要迁移到新的 API，请更改设置表面大小和显示小部件的过程，使用 AnimationSheetBuilder.collate。

collate 需要一个显式的 cellsPerRow 参数，该参数是输出图像中每行的帧数。可以手动计算，也可以按如下方式计算：

查找构建 AnimationSheetBuilder 时指定的帧宽度。例如，在以下代码段中，它是 80：

dartfinal AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(80, 30));

查找设置表面大小时指定的面板宽度；默认为 800。例如，在以下代码段中，它是 600：

dart

tester.binding.setSurfaceSize(animationSheet.sheetSize(600));

每行的帧数应该是这两个数字相除的结果，向下取整。例如，600 / 80 = 7（向下取整），因此

dart

animationSheet.collate(7)

迁移前的代码：

dart  testWidgets('Indeterminate CircularProgressIndicator', (WidgetTester tester) async {
    final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(40, 40));

    await tester.pumpFrames(animationSheet.record(
      const Directionality(
        textDirection: TextDirection.ltr,
        child: Padding(
          padding: EdgeInsets.all(4),
          child: CircularProgressIndicator(),
        ),
      ),
    ), const Duration(seconds: 2));

    // 从此处开始的代码需要迁移。

    tester.binding.setSurfaceSize(animationSheet.sheetSize());

    final Widget display = await animationSheet.display();
    await tester.pumpWidget(display);

    await expectLater(
      find.byWidget(display),
      matchesGoldenFile('material.circular_progress_indicator.indeterminate.png'),
    );
  }, skip: isBrowser); // https://github.com/flutter/flutter/issues/42767

迁移后的代码（cellsPerRow 为 20，由 800 / 40 推导）：

dart  testWidgets('Indeterminate CircularProgressIndicator', (WidgetTester tester) async {
    final AnimationSheetBuilder animationSheet = AnimationSheetBuilder(frameSize: const Size(40, 40));

    await tester.pumpFrames(animationSheet.record(
      const Directionality(
        textDirection: TextDirection.ltr,
        child: Padding(
          padding: EdgeInsets.all(4),
          child: CircularProgressIndicator(),
        ),
      ),
    ), const Duration(seconds: 2));

    await expectLater(
      animationSheet.collate(20),
      matchesGoldenFile('material.circular_progress_indicator.indeterminate.png'),
    );
  }, skip: isBrowser); // https://github.com/flutter/flutter/issues/42767

预计相关的黄金测试参考图像会失效，所有这些都应该更新。新图像应该与旧图像相同，只是比例为 1/3。

包含的版本：v2.3.0-13.0.pre
稳定版本：2.5

API 文档：

摘要

背景

变更描述

迁移指南

推导每行单元格数

代码迁移

时间线

参考