處理捲動
許多應用程式都有內容清單,從電子郵件用戶端到音樂應用程式等等。若要使用 Widget 測試驗證清單是否包含預期的內容,您需要一種捲動清單以搜尋特定項目的方法。
若要透過整合測試捲動清單,請使用 WidgetTester
類別提供的方法,該類別包含在 flutter_test
套件中。
在本食譜中,學習如何捲動項目清單以驗證是否顯示特定的 Widget,以及不同方法的優缺點。
本食譜使用以下步驟
- 建立一個包含項目清單的應用程式。
- 撰寫一個捲動清單的測試。
- 執行測試。
1. 建立具有項目清單的應用程式
#本食譜建立一個顯示長項目清單的應用程式。為了讓本食譜專注於測試,請使用在「使用長清單」食譜中建立的應用程式。如果您不確定如何使用長清單,請參閱該食譜的介紹。
將鍵值新增至您想要在整合測試中互動的 Widget。
dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp(
items: List<String>.generate(10000, (i) => 'Item $i'),
));
}
class MyApp extends StatelessWidget {
final List<String> items;
const MyApp({super.key, required this.items});
@override
Widget build(BuildContext context) {
const title = 'Long List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: const Text(title),
),
body: ListView.builder(
// Add a key to the ListView. This makes it possible to
// find the list and scroll through it in the tests.
key: const Key('long_list'),
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(
items[index],
// Add a key to the Text widget for each item. This makes
// it possible to look for a particular item in the list
// and verify that the text is correct
key: Key('item_${index}_text'),
),
);
},
),
),
);
}
}
2. 撰寫測試程式碼,捲動清單
#現在,您可以撰寫測試。在此範例中,捲動項目清單並驗證特定項目是否存在於清單中。 WidgetTester
類別提供 scrollUntilVisible()
方法,該方法會捲動清單直到顯示特定的 Widget。這很有用,因為清單中項目高度可能會因裝置而異。
scrollUntilVisible()
方法並非假設您知道清單中所有項目的高度,或者特定 Widget 在所有裝置上都呈現,而是會重複捲動項目清單直到找到它要尋找的內容。
以下程式碼示範如何使用 scrollUntilVisible()
方法來瀏覽清單並尋找特定項目。此程式碼位於名為 test/widget_test.dart
的檔案中。
dart
// This is a basic Flutter widget test.
//
// To perform an interaction with a widget in your test, use the WidgetTester
// utility that Flutter provides. For example, you can send tap and scroll
// gestures. You can also use WidgetTester to find child widgets in the widget
// tree, read text, and verify that the values of widget properties are correct.
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:scrolling/main.dart';
void main() {
testWidgets('finds a deep item in a long list', (tester) async {
// Build our app and trigger a frame.
await tester.pumpWidget(MyApp(
items: List<String>.generate(10000, (i) => 'Item $i'),
));
final listFinder = find.byType(Scrollable);
final itemFinder = find.byKey(const ValueKey('item_50_text'));
// Scroll until the item to be found appears.
await tester.scrollUntilVisible(
itemFinder,
500.0,
scrollable: listFinder,
);
// Verify that the item contains the correct text.
expect(itemFinder, findsOneWidget);
});
}
3. 執行測試
#使用以下命令從專案根目錄執行測試
flutter test test/widget_test.dart
除非另有說明,否則本網站上的文件反映 Flutter 的最新穩定版本。頁面上次更新時間為 2024-04-04。 檢視原始碼 或 回報問題。