在 flutter web 中调整浏览器窗口的大小，没有任何溢出（就像普通网站一样）

Question

我需要将完整的仪表板应用程序部署到网络上，但是在调整浏览器窗口大小时，各种组件会溢出。

我知道 SingleChildScroolView 可以解决这个问题，并且在 Flutter 3.13 之后也有 2D 滚动，但是这两种方法似乎都是围绕应该有自己的解决方案/或组件的东西进行的黑客攻击。

快速问题：

我们怎样才能做到，无论我们的应用程序的主体是什么，它的行为都像普通网页（滚动/溢出方面）？

或：

如果这是不可能的，并且我们确实需要考虑身体内部的内容（单独/按部分），那么原理和逻辑是什么？

在我的特定示例中，我有在应用程序中使用的自定义脚手架，它主要由以下内容组成：

• 侧边菜单
• 顶部标题（包含页面名称、按钮、卡片行等）
• 一个主体，其中 PageView 是父级，内容组织在不同的页面内 - （每个页面可以有所需的任何内容，可以是整个仪表板，可以是行、列等）

这是一个说明性示例：

我觉得我错过了一些东西，但希望得到一个全面的答案，可以帮助我的案例和其他人。谢谢。

我研究的其他问题：

• Flutter web：如何允许溢出到浏览器窗口之外？
• 处理 Flutter web 中的溢出

Answer 1

快速回答：你不能。

这是由于 Flutter Web 与 React/Angular/Vue/etc 之间的一个关键区别是 Flutter 不渲染任何 DOM 元素，而是基本上将所有小部件绘制到画布中。您可以通过检查正在运行的 Flutter Web 应用程序来亲自确认这一点，并看到只有几个 DOM 元素，里面什么也没有。

这是否适合你，取决于你的需求（更多这里），但在 Flutter 防御中，我相信这是一个很好的策略（也许是唯一的一个？），可以保证你的应用程序在所有平台上呈现相同的效果，特别是对于Web 平台上的浏览器之间存在许多 DOM/CSS 不一致的情况，更不用说我们多年来一直过度滥用这些技术，因为它们不是为今天的目的而设计的。

或:

Flutter 中的原理或逻辑是读取应用程序运行的屏幕尺寸并适应它们。我不会详细介绍，但总的来说，这可以使用

MediaQuery.of()

和布局/滚动/扩展/灵活/等小部件来实现。

我知道这可能会让 Web 开发人员（包括我自己）感到困惑，因为您习惯于不断向文档中添加 DOM 元素，并且这些元素会像乐高积木一样垂直增长。恢复我上面提到的，问题是 Flutter 不会渲染 DOM 元素，而是将元素绘制到 Canva 元素中，因此它在文档中基本上没有高度，因此它不会将其他元素向下推。

现在，如果您的网络应用程序使用浏览器的完整视图，屏幕尺寸就是浏览器窗口的尺寸，并且如果用户调整其大小，您的应用程序应该相应地进行调整。但是，如果您的应用程序处于嵌入到另一个网页/网站的情况，则屏幕尺寸是您的应用程序嵌入其中的

div

或

iframe

的尺寸。正如我们所知，HTML 块元素将尝试占用尽可能多的水平空间，但不会占用垂直空间，除非我们使用一些 Flex/CSS 技巧，否则不会默认。但是，如果我们无法控制嵌入应用程序的网站该怎么办？更糟糕的是，如果我们的应用动态更改高度，我们如何知道 div 或 iframe 需要多少高度？

我目前正在开发一个小型网络应用程序，我遇到了这种情况。我发现的答案是，您必须从应用程序内部控制该 div/iframe 的高度。我找到的答案很旧，需要你做一些 JS“互操作”，但幸运的是，现在我们有了 Dart 的 package:web，你可以简单地做：

import 'package:web/web.dart' as web;

final div = web.document.getElementById('app_div') as web.HTMLElement;
div.style.height = '400px'; // Or as much as your app needs

当然，这需要一些努力，因为您需要将此逻辑集中在应用程序中的某个位置，并根据您的应用程序需求更改 div/iframe 高度。我知道，对于使用 React 或 Vue 时将所有这些视为给定的 Web 开发人员来说，这可能会很痛苦。但你知道，你必须做出一些权衡，正如这个有趣的线程所示here，Flutter 团队决定走这条路，否则他们最终会遇到 React 与 React Native 的情况，你无法使用你的 React用 RN 编码。

希望这一切有帮助。