测试方向
在 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,
),
);
}),
);
},
),
);
}
}