如何在不同的屏幕尺寸上测试Flutter小部件?

lpwwtiir  于 2023-06-07  发布在  Flutter
关注(0)|答案(8)|浏览(130)

我有一个Flutter小部件,它可以根据屏幕大小显示额外的数据。有没有人知道如何在多种不同的屏幕尺寸上测试这个小部件?
我看了一下widget_tester的源代码,但什么也找不到。

dsekswqp

dsekswqp1#

可以使用WidgetTester指定自定义表面大小
下面的代码将运行屏幕大小为42x42的测试

import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets("foo", (tester) async {
    tester.binding.window.physicalSizeTestValue = Size(42, 42);

    // resets the screen to its original size after the test end
    addTearDown(tester.binding.window.clearPhysicalSizeTestValue);

    // TODO: do something
  });
}
k10s72fa

k10s72fa2#

不知道为什么,但是@rémi-rousselet的解决方案对我不起作用。我必须使用binding.window.physicalSizeTestValuebinding.window.devicePixelRatioTestValue指定屏幕大小,以便输出完全确定
我为像我这样的flutter初学者添加了更多的代码。看看这个

void main() {

  final TestWidgetsFlutterBinding binding =
    TestWidgetsFlutterBinding.ensureInitialized();

  testWidgets("Basic layout test (mobile device)", (tester) async {
    binding.window.physicalSizeTestValue = Size(400, 200);
    binding.window.devicePixelRatioTestValue = 1.0;

    await tester.pumpWidget(new MyApp());

    expect(find.byType(MyHomePage), findsOneWidget);
    // etc.
  });
}
jhdbpxl9

jhdbpxl93#

有一个名为device_preview的软件包可以模拟在不同设备上运行的flutter应用程序。

rqcrx0a6

rqcrx0a64#

@rémi-rousselet的解决方案非常有效!
此外,如果你想测试方向的变化,试试这个:

const double PORTRAIT_WIDTH = 400.0;
const double PORTRAIT_HEIGHT = 800.0;
const double LANDSCAPE_WIDTH = PORTRAIT_HEIGHT;
const double LANDSCAPE_HEIGHT = PORTRAIT_WIDTH;

final TestWidgetsFlutterBinding binding = TestWidgetsFlutterBinding.ensureInitialized();

await binding.setSurfaceSize(Size(PORTRAIT_WIDTH, PORTRAIT_HEIGHT));
await tester.pumpWidget(MyWidget());

// test in portrait

await binding.setSurfaceSize(Size(LANDSCAPE_WIDTH, LANDSCAPE_HEIGHT));
await tester.pumpAndSettle();

// OrientationBuilder gets triggered

// test in landscape
u3r8eeie

u3r8eeie5#

目前最安全的方法是使用setSurfaceSize

import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets("foo", (tester) async {
    tester.binding.setSurfaceSize(Size(400, 400));

    // reset
    tester.binding.setSurfaceSize(null);

    // continue
  });
}

查看Github相关问题

wbgh16ku

wbgh16ku6#

您可以尝试此小部件来测试您的小部件实时更改屏幕大小

屏幕尺寸测试

https://pub.dev/packages/screen_size_test

预览

Demohttps://dartpad.dartlang.org/43d9c47a8bf031ce3ef2f6314c9dbd52
代码示例

import 'package:screen_size_test/screen_size_test.dart';
...
MaterialApp(
  title: 'Demo',
  builder: (context, child) => ScreenSizeTest(
    child: child,
  ),
  home: Scaffold(
    body: ListView(
      children: List.generate(
          20,
          (index) => Container(
                padding: EdgeInsets.all(10),
                child: Placeholder(),
              )),
    ),
  ),
)
mwkjh3gx

mwkjh3gx7#

虽然@Rémi Rousselet的回答很有帮助,但它并没有完全解决我的问题。事实证明,我可以将测试中的小部件 Package 在一个MediaQuery小部件中并设置大小。

import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  Widget makeTestableWidget({Widget child, Size size}) {
    return MaterialApp(
      home: MediaQuery(
        data: MediaQueryData(size: size),
        child: child,
      ),
    );
  }

  testWidgets("tablet", (tester) async {
    final testableWidget = makeTestableWidget(
      child: WidgetUnderTest(),
      size: Size(1024, 768),
    );

    ...
  });

  testWidgets("phone", (tester) async {
    final testableWidget = makeTestableWidget(
      child: WidgetUnderTest(),
      size: Size(375, 812),
    );

    ...
  });
}
v8wbuo2f

v8wbuo2f8#

自3.10.0版本起,窗口单例已弃用(https://docs.flutter.dev/release/breaking-changes/window-singleton)。因此,现在必须按如下方式设置大小:

import 'package:flutter/widgets.dart';
import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets("foo", (tester) async {
    tester.view.physicalSize = Size(42, 42);

    // resets the screen to its original size after the test end
    addTearDown(tester.view.resetPhysicalSize);

    // TODO: do something
  });
}

相关问题