測試方向
在 Flutter 中,您可以根據給定的 方向 構建不同的佈局。例如,如果應用程式處於縱向模式,您可以將資料呈現在兩列中;如果處於橫向模式,則呈現在三列中。此外,您還可以建立測試來檢查每種方向是否顯示了正確數量的列。
在本食譜中,您可以瞭解如何檢查應用程式的 方向 是 portrait(縱向)還是 landscape(橫向),以及每種方向顯示多少列。
本示例將採取以下步驟
- 建立一個應用程式,該應用程式會根據方向更新內容佈局。
- 建立一個方向測試組。
- 建立一個縱向方向測試。
- 建立一個橫向方向測試。
- 執行測試。
1. 建立一個根據方向更新的應用程式
#建立一個 Flutter 應用程式,該應用程式在應用程式處於縱向或橫向模式時更改顯示的列數。
建立一個名為
orientation_tests的新 Flutter 專案。flutter create orientation_tests按照 根據方向更新 UI 中的步驟設定專案。
2. 建立一個方向測試組
#設定好 orientation_tests 專案後,請完成以下步驟以組織您未來的方向測試:
在您的 Flutter 專案中,開啟
test/widget_test.dart。用以下內容替換現有內容:
widget_test.dartdartimport 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:orientation_tests/main.dart'; void main() { group('Orientation', () { // ··· }); }
3. 建立一個縱向方向測試
#將縱向方向測試新增到 Orientation 組中。此測試可確保方向為 portrait(縱向),並且應用程式中僅顯示 2 列資料。
在
test/widget_test.dart中,用以下測試替換Orientation組內的...:widget_test.dartdart// Check if portrait mode displays correctly. testWidgets('Displays 2 columns in portrait mode', (tester) async { // Build the app. await tester.pumpWidget(const MyApp()); // Change to portrait. tester.view.physicalSize = const Size(600, 800); tester.view.devicePixelRatio = 1.0; addTearDown(() { tester.view.resetPhysicalSize(); }); await tester.pump(); // Verify initial orientation is portrait. final orientation = MediaQuery.of( tester.element(find.byType(OrientationList)), ).orientation; expect(orientation, Orientation.portrait); // Verify there are only 2 columns in portrait mode. final gridViewFinder = find.byType(GridView); final gridView = tester.widget<GridView>(gridViewFinder); final delegate = gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount; expect(delegate.crossAxisCount, 2); });
4. 建立一個橫向方向測試
#將橫向方向測試新增到 Orientation 組中。此測試可確保方向為 landscape(橫向),並且應用程式中僅顯示 3 列資料。
在
test/widget_test.dart的Orientation組中,在橫向測試之後新增以下測試:widget_test.dartdart// Check if landscape mode displays correctly. testWidgets('Displays 3 columns in landscape mode', (tester) async { // Build the app. await tester.pumpWidget(const MyApp()); // Change to landscape. tester.view.physicalSize = const Size(800, 600); tester.view.devicePixelRatio = 1.0; addTearDown(() { tester.view.resetPhysicalSize(); }); await tester.pump(); // Verify initial orientation is landscape. final orientation = MediaQuery.of( tester.element(find.byType(OrientationList)), ).orientation; expect(orientation, Orientation.landscape); // Verify there are only 3 columns in landscape mode. final gridViewFinder = find.byType(GridView); final gridView = tester.widget<GridView>(gridViewFinder); final delegate = gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount; expect(delegate.crossAxisCount, 3); });
5. 執行測試
#使用以下命令從專案根目錄執行測試:
flutter test test/widget_test.dart完整示例
#import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:orientation_tests/main.dart';
void main() {
group('Orientation', () {
// Check if portrait mode displays correctly.
testWidgets('Displays 2 columns in portrait mode', (tester) async {
// Build the app.
await tester.pumpWidget(const MyApp());
// Change to portrait.
tester.view.physicalSize = const Size(600, 800);
tester.view.devicePixelRatio = 1.0;
addTearDown(() {
tester.view.resetPhysicalSize();
});
await tester.pump();
// Verify initial orientation is portrait.
final orientation = MediaQuery.of(
tester.element(find.byType(OrientationList)),
).orientation;
expect(orientation, Orientation.portrait);
// Verify there are only 2 columns in portrait mode.
final gridViewFinder = find.byType(GridView);
final gridView = tester.widget<GridView>(gridViewFinder);
final delegate =
gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
expect(delegate.crossAxisCount, 2);
});
// Check if landscape mode displays correctly.
testWidgets('Displays 3 columns in landscape mode', (tester) async {
// Build the app.
await tester.pumpWidget(const MyApp());
// Change to landscape.
tester.view.physicalSize = const Size(800, 600);
tester.view.devicePixelRatio = 1.0;
addTearDown(() {
tester.view.resetPhysicalSize();
});
await tester.pump();
// Verify initial orientation is landscape.
final orientation = MediaQuery.of(
tester.element(find.byType(OrientationList)),
).orientation;
expect(orientation, Orientation.landscape);
// Verify there are only 3 columns in landscape mode.
final gridViewFinder = find.byType(GridView);
final gridView = tester.widget<GridView>(gridViewFinder);
final delegate =
gridView.gridDelegate as SliverGridDelegateWithFixedCrossAxisCount;
expect(delegate.crossAxisCount, 3);
});
});
}import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appTitle = 'Orientation Demo';
return const MaterialApp(
title: appTitle,
home: OrientationList(title: appTitle),
);
}
}
class OrientationList extends StatelessWidget {
final String title;
const OrientationList({super.key, required this.title});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: OrientationBuilder(
builder: (context, orientation) {
return GridView.count(
// Create a grid with 2 columns in portrait mode, or
// 3 columns in landscape mode.
crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
// Generate 100 widgets that display their index in the list.
children: List.generate(100, (index) {
return Center(
child: Text(
'Item $index',
style: TextTheme.of(context).displayLarge,
),
);
}),
);
},
),
);
}
}