如何使用 MediaQuery 构建主题？

Question

开始学习 Flutter，所以我在想是否可以创建一个返回 ThemeData 对象的函数，但在这个函数内部我想使用 MediaQuery.of(context)。我的意思是，我知道我可以创建这样的函数，但是如果我在其中使用MediaQuery.of(context)，我会出错 (MediaQuery.of() called with a context that does not contain a MediaQuery) 抱怨缺少 MediaQueryProvider。我知道我可以在 MaterialApp 的子元素中使用 MediaQuery，但我现在遇到了设计问题。想象一下：

ThemeData getTheme(BuildContext context) {
  // I wanna be able to call MediaQuery.of(contex) here
  return ThemeData();
}

MaterialApp(
   home: home,
   // the getTheme() must be able to use MediaQuery. It takes a context and returns a ThemeData object
   theme: theme.getTheme(context),
   routes: routes,
)

有办法吗？或事件更好，我应该这样做吗？

感谢您的帮助。

Answer 1

你可以试试这个。

为您的MaterialApp 的home 创建一个无状态/有状态小部件，并在其中创建您的getTheme 方法。

例子，

homePage extends StatelessWidget{

ThemeData getTheme(BuildContext context) {
  // Call MediaQuery.of(contex) here
  return ThemeData();
}

@override
//build method

}//homePage ends here.

现在，在您的材料应用程序中，简单地调用该方法。

MaterialApp(
   home: homePage(),
  
   theme: homePage().getTheme(context),
   routes: routes,
)

Answer 2

欢迎来到兄弟会。 实际上，要调用MediaQuery，您需要用MaterialApp() 包装您的主小部件，这通常在您的main.dart 文件中完成。 这是一个例子：

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

希望对您有所帮助！