在Flutter中正确使用MediaQuery

Question

使用MediaQuery的最佳做法是什么？该应用程序将在不同的屏幕尺寸下使用，因此硬编码小部件的宽度和高度可能是一个问题。

我很难理解MediaQuery类的不同用法。我尝试在线搜索它，但没有找到很多示例。如果有人可以帮助我理解此类或提供我可以用来理解此MediaQuery类的链接，那将是很好的。

Answer 1

将会有几点：

• 例如MediaQuery.of(context).size.width-不会为您提供用于物理设备测量的确切宽度（以像素为单位），而是以逻辑像素为单位。要获得准确的物理设备测量值，您需要执行以下操作：MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio
  • MediaQuery.of(context).padding.top是状态栏的高度
  • kToolbarHeight是AppBar的高度
  • 如果您有BottomNavigation栏，则高度为kBottomNavigationBarHeight。

因此，要扣除上面所有的值，我们可以这样做：MediaQuery.of(context).size.height — MediaQuery.of(context).padding.top — kToolbarHeight — kBottomNavigationBarHeight

如果您仍在寻找问题的答案，我前段时间已将本教程放在一起。 Widgets sizes relative to screen size in Flutter using MediaQuery。希望对您有所帮助！