我有一个Flutter应用程序，将部署为嵌入在iFrame或另一个Flutter应用程序通过WebView。我动态地获取页面的高度：
Size size = MediaQuery.of(context).size;现在，我有一个问题，当我将屏幕大小设置为iPhone SE，或者我在iPhone SE上查看网页时，底部的一部分被切断了。为了解决这种情况，我想我可以使用高度的百分比，所以我将框的总数设置为等于屏幕大小的100%。例如：
...
Column(
children:[
Container(
height: size.height * 0.4
...
),
Container(
height: size.height * 0.6
...
),
],
);但这有仍然导致较小屏幕上溢出的问题。所以我把垂直尺寸设置为小于100%的总和。
当我在更大的屏幕上查看网页时（比如三星Galaxy 20 Ultra），底部有一个很大的缺口。我想不出一种方法来格式化页面，以适应较小的屏幕和较大的屏幕。
如果答案很明显，请原谅;我和Flutter在一起还不到一年。
3条答案
按热度按时间n7taea2i1#
避免对断点使用MediaQuery。你想根据“剩下的”来选择，而不是“总的”。为此，请使用LayoutBuilder。但是你唯一应该做的事情就是决定像素数，比如两列还是三列，或者侧导航还是底部导航。不要使用像素的分数来做任何事情。这就是Flex小部件（Column、Row和朋友）的工作。而且绝对不要根据宽度调整文本的大小。请拒绝任何包，甚至提供作为一个选择。
pprl5pva2#
你的问题不清楚。但是如果你没有足够的空间在小屏幕设备上显示内容，那么你必须使用ListView。
如果你想设备页面两个或更多的部分使用扩展/ Flex。
或者，如果您有示例内容，请将其粘贴在这里，以便有人得到更好的想法。
esyap4oy3#
因此，对我有效的解决方案是使用
CustomScrollView和相关的slithers。这允许视图扩展到适当的大小。我基本上将第一个Column替换为CustomScrollView，并将ListView.builder替换为：