跳至主要內容
目錄

將 AnimationSheetBuilder.display 取代為 collate

目錄

摘要

#

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。 檢視原始碼 或 回報問題。