如何在颤振initState内传递设备宽度到其他屏幕?

Question

我想传递deviceWidth和deviceHeight到其他屏幕。下面是我的代码:

class _SplashPageState extends State<SplashPage> {
@override
void initState(){
super.initState();
var deviceHeight = MediaQuery.of(context).size.height;
var deviceWidth = MediaQuery.of(context).size.width;
Future.delayed(Duration(seconds: 1), () async {
await Navigator.pushNamed(context, "/home");
});
}

但是当我运行这段代码时，我得到了这个错误:

dependOnInheritedWidgetOfExactType<MediaQuery>() or dependOnInheritedElement() was called before _SplashPageState.initState() completed.

如何解决这个问题?我这样做是对的吗?

Answer 1

问题是，从init状态访问上下文中的任何内容可能无法保证小部件已经构建。解决方案是在第一次初始渲染帧之后触发一个方法。这样，上下文就可以正确地更新为小部件的当前上下文。

试试我写的这个例子代码:

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
void initState() {
super.initState();
WidgetsBinding.instance!.addPostFrameCallback((_) {
var deviceHeight = MediaQuery.of(context).size.height;
var deviceWidth = MediaQuery.of(context).size.width;
print(deviceHeight);
print(deviceWidth);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
);
}
}

这将打印屏幕的宽度和高度。没有任何错误。这是因为我正在使用

WidgetsBinding.instance!.addPostFrameCallback((_) {
});

本质上它所做的是方法将在第一个框架构建后执行。更多信息在这里https://api.flutter.dev/flutter/scheduler/SchedulerBinding/addPostFrameCallback.html

我想补充的是，这是一个奇怪的用例，从init状态内获得屏幕宽度和高度。也许有更好的方法可以达到你想要达到的目标。