【问题标题】:Flutter widget test: setting padding with MediaQuery not appliedFlutter 小部件测试:未应用 MediaQuery 设置填充
【发布时间】:2020-12-11 04:47:23
【问题描述】:

由于flutter的测试环境没有模拟器这样的系统状态栏,所以我想在顶部使用MediaQuery添加填充。

这是我的测试代码:

void main() {
  testWidgets('MediaQuery padding test', (WidgetTester tester) async {
    const double statusBarHeight = 24.0;

    await tester.pumpWidget(
      MaterialApp(
        home: MediaQuery(
          data: const MediaQueryData(
            viewInsets: EdgeInsets.only(top: statusBarHeight),
          ),
          child: Scaffold(
            appBar: AppBar(
              title: const Text('PopupMenu Test'),
            ),
              
          ),
        ),
      ),
    );

    expect(find.byType(AppBar), findsOneWidget);
    expect(tester.getTopLeft(find.byType(AppBar)).dy, windowPaddingTop);
  });
}

由于我使用MediaQueryData.viewInsets 添加了顶部填充的24.0,我预计AppBar 左上y 轴为24.0,但结果为零。
我也尝试过使用viewPadding 而不是viewInsets 进行测试,但结果相同。

我想知道我的测试中没有应用顶部填充的原因,以及如何解决这个问题。我将不胜感激任何帮助。谢谢。

【问题讨论】:

  • 只是好奇,你到底想在那里测试什么?

标签: flutter dart flutter-test widget-test-flutter


【解决方案1】:

旧答案:
[您不应该以这种方式使用 MediaQuery 和 Scaffold。 MediaQuery 不应该在小部件树中,并且使用它来检索媒体数据。 脚手架应覆盖整个屏幕]

更新中(根据cmets中的答案):

他们正在使用MediaQuery 来模拟非安全区域,例如某些手机中的缺口。这仅用于测试脚手架小部件以防止入侵保险箱(如缺口)。

如果你只是想测试,错误就在这里:

viewInsets: EdgeInsets.only(top: statusBarHeight),

应该是 viewPadding 而不是 viewInsets:

viewPadding: EdgeInsets.only(bottom: viewPadding),

现在,如果您尝试构建屏幕而不是测试屏幕,则不需要(也不应该)使用 MediaQuery。只需使用您的 Scaffold 作为根小部件。

【讨论】:

猜你喜欢
  • 2021-03-31
  • 2018-07-07
  • 1970-01-01
  • 2019-02-25
  • 2021-01-28
  • 2021-11-13
  • 2021-10-08
  • 2021-05-09
  • 1970-01-01
相关资源
最近更新 更多