Flutter Web：URL 栏不隐藏在滚动条上答案

【问题标题】：Flutter Web: URL Bar not hiding on scrollFlutter Web：URL 栏不隐藏在滚动条上
【发布时间】：2021-02-06 13:37:57
【问题描述】：

我有一个 Flutter Web 应用程序，其中包含一个 SingleChildScrollView 和其中的许多元素。在我的 iPhone Safari 上查看时，URL 和底部栏不会像在任何其他网站上那样向下滚动时隐藏。

我已经尝试了很多方法，包括使用不同的元素（如 ListViews）和玩物理，但 URL 和底栏仍然没有消失。

有什么想法可以配置一个网络颤振应用程序来帮助浏览器识别滚动并关闭它们吗？

【问题讨论】：

标签： flutter dart mobile-safari flutter-web

【解决方案1】：

在 GitHub 中查看此线程：Flutter for Web does not hide url bar and navigation bar on scroll in iOS's Safari

信用：jamesblasco

您可以将其添加到任何 Flutter 项目的 index.hml 文件中并在那里尝试。

<style>
  body {
    height: 500vh !important;  /* Bigger than 100% to allow scroll */
    position: static !important;  /* Override absolute from flutter */
    overflow-y: scroll !important; /* Allows verticall scrolling */
    overflow-x: hidden !important;
    touch-action: pan-y !important;  /* Allows vertical scrolling */
    overscroll-behavior: none; /* Avoid bouncing scrolling on top/bottom edget */
  }

  /* Centers flutter canvas with a size of the viewport*/
  flt-glass-pane {
    position: fixed !important; /* Overrides absolute from flutter  */
    top: 50vh  !important;
    left: 50vw  !important;
    max-width: 100vw  !important;
    max-height: 100vh  !important;
  transform: translate(-50vw, -50vh)  !important;
  }

  /* 
  Scrollbar hide doesn't work on iOS, they add a default one when overflow:true and  -webkit-overflow-scrolling: touch; 
  Sadly since iOS 13, this value is forced on iOS -> https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
*/
  ::-webkit-scrollbar {
    display: false;
    width: 0px;
    height: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
  }
</style>

【讨论】：

我在搜索相同问题时遇到了这个问题。此后，该应用程序已停止检测对按钮的任何触摸，但是是的，它现在确实进入了全屏状态。我所做的只是把这个样式标签放在我的 index.html 的 head 部分。有什么指点吗？