跳到主內容

概述

#

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
dart
final 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 文件

相關 PR

除非另有說明，本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-06-01。 檢視原始碼 或 報告問題。