flutter 动态填充屏幕

mm5n2pyu  于 2023-05-19  发布在  Flutter
关注(0)|答案(3)|浏览(158)

我有一个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在一起还不到一年。

n7taea2i

n7taea2i1#

避免对断点使用MediaQuery。你想根据“剩下的”来选择,而不是“总的”。为此,请使用LayoutBuilder。但是你唯一应该做的事情就是决定像素数,比如两列还是三列,或者侧导航还是底部导航。不要使用像素的分数来做任何事情。这就是Flex小部件(Column、Row和朋友)的工作。而且绝对不要根据宽度调整文本的大小。请拒绝任何包,甚至提供作为一个选择。

pprl5pva

pprl5pva2#

你的问题不清楚。但是如果你没有足够的空间在小屏幕设备上显示内容,那么你必须使用ListView。
如果你想设备页面两个或更多的部分使用扩展/ Flex。
或者,如果您有示例内容,请将其粘贴在这里,以便有人得到更好的想法。

esyap4oy

esyap4oy3#

因此,对我有效的解决方案是使用CustomScrollView和相关的slithers。这允许视图扩展到适当的大小。我基本上将第一个Column替换为CustomScrollView,并将ListView.builder替换为:

SliverList(
  delegate: SliverChildBuilderDelegate(
    childCount: itemCountLimit,
    (BuildContext context, int index) {
      ...
    }

相关问题