内容

用 collate 替换 AnimationSheetBuilder.display

内容

摘要
上下文
更改说明
迁移指南
- 每行导出单元格
- 迁移代码
时间轴
参考文献

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

AnimationSheetBuilder 是一个测试实用程序类，用于记录动画 Widget 的帧，然后将这些帧组合成一个动画图以进行黄金测试。旧的组合方式涉及使用 display 将图像列出到类似表格的 Widget 中，使用 sheetSize 调整测试区域，并捕获表格 Widget 以进行比较。一个新的方法 collate 已被添加，它可以直接将帧组合成一个图像进行比较，这需要更少的样板代码，并且在不影响质量的情况下输出更小的图像。因此，旧方法的 API 已被弃用。

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

以下更改已对 AnimationSheetBuilder 类进行。

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

要迁移到新的 API，请将设置区域大小和显示 Widget 的过程更改为 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));

    // The code starting here needs migration.

    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 文档

摘要

上下文

更改说明

迁移指南

每行导出单元格

迁移代码

时间轴

参考文献